在第二次单击后响应复选框更新
提问于 2022-08-23 03:06:33
我正在尝试实现多个复选框，但是onChange只在再次单击其他复选框之后才生效，下面是代码片段:
在这里，我初始化将被呈现为组件呈现上的复选框的对象数组
const contentFilters = ['Videos', 'Life Events', 'Collabs'];
const [selectedContentFilters, setSelectedContentFilter] = useState([]);
useEffect(() => {
setSelectedContentFilter(
contentFilters.map((filter, index) => {
return {
id: index + 1,
label: filter,
checked: false,
};
}),
);
}, []);下面是如何将对象数组映射到复选框组件中
{selectedContentFilters.map((filter) => {
return (
<DropDownItem key={filter.id}>
<CheckboxContainer>
<input
id={filter.id}
type={'checkbox'}
onChange={() => {
_setSelectedContentFilter(filter.id);
}}
checked={filter.checked}
name={filter.label}
/>
<Label>{filter.label}</Label>
</CheckboxContainer>
</DropDownItem>
);
})}下面是被调用的_selectedContentFilter，一旦onChange触发器更新数组状态，我就克隆数组，以便没有相同的引用并导致状态更新的重新呈现：
const _setSelectedContentFilter = (id) => {
let cloneSelectedContentFilter = [...selectedContentFilters];
cloneSelectedContentFilter = cloneSelectedContentFilter.map((filter) => {
if (filter.id === id) {
filter.checked = !filter.checked;
}
return filter;
});
setSelectedContentFilter(cloneSelectedContentFilter);
};
回答 1
Stack Overflow用户
发布于 2022-08-23 07:05:07
该问题是由react引导下拉项组件引起的，该组件导致复选框延迟重新呈现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73457608
复制相关文章
点击加载更多
腾讯云开发者
