在组件中创建选择所有复选框的功能

Question

我有两个组件，分别是componentA和componentB。

componentA - Parent
    -Has one checkbox(selectall)
componentB - Children
    -Has many checkboxes on each row

[我想当我选中父复选框时，儿童复选框被选中，当我取消选中其中一个儿童时父项未选中。

请就如何执行此操作提供一些指导。我知道我必须创建一个状态。我想使用挂钩和功能组件。

Answer 1

有多种实现方法，一种最简单的方法是按如下方式创建父组件并将状态值作为道具发送给子道具

function Parent() {
  const [allSelected, setAllSelected] = useState(false)

 function handleChange(e) {
  setAllSelected(!allSelected)
 }

return (
    <div className="App">
      <input type="checkbox" name="isAllSelected" onChange={handleChange} checked={allSelected}/> Select all
      <CheckboxList isSelected={allSelected}/>
    </div>
  );
}

Answer 2

另一种方法是让selectAll onChange事件更改所有其他框的值

const App = () =>{
  const [allBox, changeAllBox] = useState(false);
  const [testOne, changeTestOne] = useState(false);
  const [testTwo, changeTestTwo] = useState(false);
  const [testThree, changeTestThree] = useState(false);
  const selectAll = () =>{
    const newVal = allBox ? false : true;
    changeTestOne(newVal);
    changeTestTwo(newVal);
    changeTestThree(newVal);
    changeAllBox(newVal);
  }
  const changeValue = (e) =>{
    const number = e.currentTarget.id;
    console.log(number)
    switch(number){
      case '1':
        changeTestOne(!testOne)
        break;
      case '2':
        changeTestTwo(!testTwo)
        break;
      case '3':
        changeTestThree(!testThree)
        break;
    }
  }
  return(
    <div>
      <label htmlFor = 'all'>Select All</label>
      <input id = 'all' type = 'checkbox' onChange = {selectAll} checked = {allBox} />
      <ChildCheck label = '1' id ='1' checked = {testOne} onChange = {changeValue} />
      <ChildCheck label = '2' id = '2' checked = {testTwo} onChange = {changeValue}/>
      <ChildCheck label = '3' id = '3' checked = {testThree} onChange = {changeValue}/>
    </div>
 )
}