我的父组件]从其子组件检索检查的输入值。所以我有一个函数((handleChecked)),它带有两个参数:一个'id'和一个已检查状态'isChecked':
const handleChecked = useCallback(({ id, isChecked }) => {
const newCheckedValues = checkedValues.filter(current => current !== id);
setCheckedValues(newCheckedValues);
if (isChecked) {
newCheckedValues.push(id);
setCheckedValues(newCheckedValues);
}
}, [checkedValues]);
我的功能应该做什么:
1-从单击的输入中获取ID和已检查状态,2-检查状态以获取重复的ID,3-如果存在,请将其删除,4-保存状态,5-如果选中,则将ID存储在临时数组中,6-保存新状态。
它做什么:
当我单击新输入]时,父“ checkedValues”状态为空,然后从零开始。这意味着作为过滤状态结果创建的临时数组也为空。现在,此函数只是在状态中添加一个id,然后将其替换为新单击的输入。
而且我需要收集所有检查的值
和将它们存储在状态中,然后再将其发送到api。我设法在此沙箱中展示我的“期望”:https://codesandbox.io/s/react-hooks-filter-state-array-toggle-input-checked-gz504
它有效,唯一的区别是它在同一组件中,并且使用html form event
而不是props legacy。我的父组件从其子组件检索选中的输入值。所以我有一个函数(handleChecked),它带有两个参数:一个'id'和一个选中的状态'isChecked':const ...
最后,我在3中解构了我的组件: