如果复选框被选中/未被选中，是否反应将项目添加/删除到数组?(挂钩，而不是基于类的组件)

Question

我一直在寻找不同的答案，但所有答案都与jQuery相关，或者对于我的想法来说非常复杂？我正在处理一个表单，希望当用户选中一个框时，它的值应该添加到父组件中存储信息的数组中。若复选框未选中，则从数组中删除该项。

简化代码

const Knowledge = (props) => {
const checkHandler = (e) => {
const tools = props.data.usesTools; //Array in parent component
const value = e.target.value; //Checkbox value
tools.includes(value) //If Array contains value
? tools.filter((tool) => tool.value != value) // Then remove item from Array
: tools.push(value) // Else, push item to Array;
};

return (
<div> 
<label>
<input
type="checkBox"
name="usesTools"
value="Slack"
onChange={checkHandler}
/>
Slack
</label>
</div>
//Other checkboxes removed for simplicity
)
}

问题：

1( 如果选中/未选中复选框，如何将项目添加/删除到阵列。

2( 我尝试添加一个钩子来选中/取消选中该框，但它会在调用处理程序后立即选中所有框：

const [ isSelected, setSelected = useState(false);
<input
type="checkBox"
name="usesTools"
value="Slack"
onChange={checkHandler}
checked={isSelected}
/>

Answer 1

无论您将组件声明为函数还是类，它都不能修改自己的道具。React非常灵活，但它有一个严格的规则：所有React组件在其道具方面都必须像纯函数一样工作，因为您正在修改子组件中的props.data.usesTools。您需要做的是将Props中的回调函数传递给子组件，该子组件将更新usesTools数组，如下面的

## function to update the usesTools state in parent component ##
const [usesTools,setUsesTools]= React.useState([]);
const updateUsesTools = (item) => {
if (usesTools.includes(item)) {
setUsesTools(usesTools.filter(tool => tool.value != item));
} else {
setUsesTools([...usesTools, item]);// or push
}
};

## function in child component to handle change event ##
const checkHandler = e => {
const tools = props.data.usesTools; //Array in parent component
const value = e.target.value; //Checkbox value
props.updateUsesTools(value);
};