父如何在子组件中处理子组件中多个复选框的状态？

Question

我有多个动态复选框。 这些复选框放置（假定）在“ B”组件中。 我已经在“ B”的父级“ A”组件中管理了这些复选框的状态。 单击一个或所有复选框后，我要渲染一个div

预期结果 ：如果单击一个或所有复选框，则渲染div。 如果未选择任何一个，则div应该被隐藏。 基本上，即使选中了一个复选框，div也应该是可见的。

当前结果 ：单击一个复选框时，将渲染div，但是如果选中另一个复选框，则div消失。

这是我的A组件（父母）

const A = () => {
   const [isChecked, setIsChecked] = useState(false) // state that holds state of check boxes 

   return (
      {isChecked ? <div>Some Content..</div> : null} // rendering the div according to the state of the checkboxes

      <Child isChecked={isChecked} setIsChecked={setIsChecked} />
  ) 
}

子组件代码

 const Child = props => {

        return (
           {checkBoxList.map((box, index) => (
              <CustomCheckBox
                 key={index}
                 name={`check-box-${index}`}  // to uniquely identify each check box 
                 isChecked={props.isChecked}
                 setIsChecked={props.setIsChecked} />
           ))}
        )
    }

CustomCheckBox组件：

 const CustomCheckBox = props => {

      const onChangeHandler = (event) => {
         props.isChecked ? props.setIsChecked(false) : props.setIsChecked(true)
      }

      return <input name={props.name} type="checkBox" onChange={onChangeHandler} />;
 };

  CustomCheckBox.propTypes = {
    name: string
  }

我知道父组件状态现在仅能处理一个复选框。

当前结果的原因是由于onChangeHandler函数中包含的条件。

  props.isChecked ? props.setIsChecked(false) : props.setIsChecked(true)

我对如何使用单个处理程序函数处理上述情况下的多个复选框的状态感到困惑！

Answer 1

您可以跟踪单击的复选框索引，而不是是否单击该复选框

const [isChecked, setIsChecked] = useState([]) // state that holds state of checked boxes 

然后处理程序将变为：

const onChangeHandler = (index) => {

    const result = props.isChecked;
    var i = result.indexOf(index);
    if (i> -1) {
        result.splice(i, 1);
    }
    else {
        result = [...result, index]
    }
    props.setIsChecked(result)
  }

所以在父级中，您将检查isChecked.length> 0

希望这可以帮助