Javascript 如果选中/未选中复选框，是否将添加/删除项添加到数组？（钩子，而不是基于类的组件）

我一直在寻找不同的答案，但所有这些答案都与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
 )
}

const知识=（道具）=>{
常量checkHandler=（e）=>{
const tools=props.data.usesTools；//父组件中的数组
const value=e.target.value；//复选框值
tools.includes（value）//如果数组包含值
？tools.filter（（tool）=>tool.value！=value）//然后从数组中删除项
：tools.push（value）//否则，将项推送到数组；
};
返回(
松弛的
//为简单起见，删除了其他复选框
)
}

问题:

1） 如果选中/未选中复选框，如何向阵列添加/删除项目

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

const [ isSelected, setSelected = useState(false);

  <input
    type="checkBox"
    name="usesTools"
    value="Slack"
    onChange={checkHandler}
    checked={isSelected}
  />

const[isSelected，setSelected=useState（false）；

无论您是将组件声明为函数还是类，它都不能修改自己的道具。React非常灵活，但它有一条严格的规则：所有React组件在修改子组件中的

道具.data.UseStols

时，其道具必须像纯函数一样。您需要做的是s Props to child组件中的回调函数，它将更新

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);
  };

---

但是数据包含在一个大钩子对象中，比如：const[datos，setDatos]=useState（{fullName:，email:，usesTools:[]，/…更多数据吨数}）如何只更新usesTools数组而不触及其余部分？没有问题，您可以通过这样做只更新对象的usesTools数组。setDatos（{…datos，usesTools:[…datos.usesTools，newItem]}）