Создание флажка «Выбрать все» в компоненте

Question

У меня есть 2 компонента, которые являются компонентом А и компонентом В.

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

Мне нужна ситуация, когда при проверке родительского флажка отмечаются все дочерние флажки, а при снятии флажка с одного из дочерних элементов родительский флажок не проверяется.

Пожалуйста, укажите направление как это сделать Я знаю, что должен создать государство. Я хочу использовать крючки и функциональный компонент.

Answer 1

Другим способом было бы, чтобы событие 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>
 )
}

Answer 2

Существует несколько способов достижения этого. Самый простой способ - создать родительский компонент следующим образом и отправить значение состояния в качестве реквизитов дочерним реквизитам

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

function CheckboxList(props) {
  return (
    <div className="App">
      <label>
        <input type="checkbox" name="1" checked={props.isSelected}/> 
        1
      </label>
      <label>
        <input type="checkbox" name="2"  checked={props.isSelected}/> 
        2
      </label>
    </div>
  );
}