在组件中创建全选复选框功能

Question

我有两个组件，它们是组件A和组件B。

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

我希望出现这样的情况：当我选中父复选框时选中子项复选框，当我取消选中其中一个子项时父项未选中。

请就如何做到这一点给出一些指导。我知道我必须创造一个国家。我想使用钩子和功能组件。

Answer 1

有多种方法可以实现这一点，最简单的方法是如下创建父组件，并将状态值作为props发送给子props

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

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