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

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

无论你将组件声明为函数还是类，它都不能修改自己的 props。 React 非常灵活，但它有一个严格的规则：所有 React 组件在其 props 方面都必须像纯函数一样工作，因为您正在修改子组件中的 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);
  };