如何使用 Ant 设计处理复选框组函数

Question

>我使用ant设计创建了复选框组件。如果我单击全选框，那么我需要自动触发复选框分组项目

这是我的代码

constructor(props) {
super(props);
this.state = {
checkedList: [],
checkAll: false,
};
}
<Checkbox onChange={this.onCheck}
checked={this.state.checkAll} value={10}>check all</Checkbox>
<Checkbox.Group onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%',marginLeft:'5%',fontWeight:'lighter' }}>
<Checkbox value={101}>option 1</Checkbox> <br />
<Checkbox value={102}>option 2</Checkbox>
</Checkbox.Group>

onCheck =(e)=>{
this.setState({
checkAll: e.target.checked,
});
;
}
onGroupChange=(checkedList)=>{
this.setState({
checkedList,
checkAll: checkedList,
});
}

你能帮我吗？

Answer 1

在代码示例中，onCheck 函数不会更改任何检查列表。您只是将 checkAll 状态更改为 true。因此，它不会更新复选框。 这是我针对您的问题的两种不同解决方案。

const onloadOptions = [
{ label: 'option 1', value: 101 },
{ label: 'option 2', value: 102 }
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedList: [],
checkAll: false,
};
}
onCheck = (e) => {
const values= onloadOptions.map(record => record.value)
this.setState({
checkAll: e.target.checked,
checkedList: e.target.checked ? values : [],
});
;
}
onGroupChange = (checkedList) => {
this.setState({
checkedList,
checkAll: checkedList.length === onloadOptions.length,
});
}
render() {
console.log();
return (
<div>
<Checkbox onChange={this.onCheck}
checked={this.state.checkAll} >check all</Checkbox>
<Checkbox.Group options={onloadOptions} onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%', marginLeft: '5%', fontWeight: 'lighter' }}>
</Checkbox.Group>
</div>
);
}

}

这类似于您的方法，但由于我们无法预测选项的数量，因此我会选择高于的方式而不是低于一个的方式。

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedList: [],
checkAll: false,
};
}
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
onChange={this.onCheck}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<Checkbox.Group value={this.state.checkedList} onChange={this.onGroupChange} >
<Checkbox value={101}>option 1</Checkbox>
<Checkbox value={102}>option 2</Checkbox>
</Checkbox.Group>
</div>
);
}
onGroupChange = (checkedList) => {
this.setState({
checkedList,
});
}
onCheck = (e) => {
this.setState({
checkedList: e.target.checked ? [101,102] : [],
checkAll: e.target.checked,
});
}
}