如何在reactjs中使用antd多个复选框?

未选中的预期输出:未选中:[梨"] 这是我的代码sanbox: https://codesandbox.io/s/check-all-ant-design-demo-b3udh?fontsize=14&hidenavigation=1&theme=dark&file=/index.js :0-1613 解决方案 const plainOptions = ["Apple", "Pear", "Orange"];const defaultCheckedList = ["Apple", "Orange"];class App extends React.Component { state = { checkedList: defaultCheckedList, uncheckedList: [] }; onChange = checkedList => { this.setState({ checkedList }); }; onCheckAllChange = e => { this.setState({ checkedList: e.target.checked ? plainOptions : [], uncheckedList: e.target.checked ? [] : plainOptions }); }; onCheckItem = value => e => { this.setState( { checkedList: this.state.checkedList.includes(value) ? this.state.checkedList.filter(x => x !== value) : [...this.state.checkedList, value] }, () => { this.setState({ uncheckedList: plainOptions.filter( o => !this.state.checkedList.includes(o) ) }); } ); }; render() { const { checkedList, uncheckedList } = this.state; console.log(uncheckedList); return ( <div> <div className="site-checkbox-all-wrapper"> <Checkbox indeterminate={ checkedList.length < plainOptions.length && checkedList.length > 0 } onChange={this.onCheckAllChange} checked={checkedList.length === plainOptions.length} > Check all </Checkbox> </div> <br /> {plainOptions.map((item, idx) => ( <Checkbox key={item + idx} onChange={this.onCheckItem(item)} checked={checkedList.includes(item)} > {item} </Checkbox> ))} </div> ); }}I am using antd checkbox . I am storing checked value by using array of value , but I need to store unchecked array of value . const plainOptions = ["Apple", "Pear", "Orange"]; const defaultCheckedList = ["Apple", "Orange"]; state = { checkedList: defaultCheckedList }; onChange = checkedList => { this.setState({ checkedList }); }; onCheckAllChange = e => { this.setState({ checkedList: e.target.checked ? plainOptions : [] }); }; onCheckItem = value => e => { this.setState({ checkedList: this.state.checkedList.includes(value) ? this.state.checkedList.filter(x => x !== value) : [...this.state.checkedList, value] }); }; // This is checked All , When user click on this checked box , it will be store array of value. <Checkbox indeterminate={ checkedList.length < plainOptions.length && checkedList.length > 0 } onChange={this.onCheckAllChange} checked={checkedList.length === plainOptions.length} > Check all </Checkbox> {plainOptions.map((item, idx) => ( <Checkbox key={item + idx} onChange={this.onCheckItem(item)} checked={checkedList.includes(item)} > {item} </Checkbox> ))}Currently, when I checked on checkbox , it will give me array of values such as ["apple","Orange"], but I want to keep store unchecked value by using array of value ["Pear"]Expected Output for Unchecked : Unchecked : ["Pear"]Here is my codesanbox:https://codesandbox.io/s/check-all-ant-design-demo-b3udh?fontsize=14&hidenavigation=1&theme=dark&file=/index.js:0-1613 解决方案 const plainOptions = ["Apple", "Pear", "Orange"];const defaultCheckedList = ["Apple", "Orange"];class App extends React.Component { state = { checkedList: defaultCheckedList, uncheckedList: [] }; onChange = checkedList => { this.setState({ checkedList }); }; onCheckAllChange = e => { this.setState({ checkedList: e.target.checked ? plainOptions : [], uncheckedList: e.target.checked ? [] : plainOptions }); }; onCheckItem = value => e => { this.setState( { checkedList: this.state.checkedList.includes(value) ? this.state.checkedList.filter(x => x !== value) : [...this.state.checkedList, value] }, () => { this.setState({ uncheckedList: plainOptions.filter( o => !this.state.checkedList.includes(o) ) }); } ); }; render() { const { checkedList, uncheckedList } = this.state; console.log(uncheckedList); return ( <div> <div className="site-checkbox-all-wrapper"> <Checkbox indeterminate={ checkedList.length < plainOptions.length && checkedList.length > 0 } onChange={this.onCheckAllChange} checked={checkedList.length === plainOptions.length} > Check all </Checkbox> </div> <br /> {plainOptions.map((item, idx) => ( <Checkbox key={item + idx} onChange={this.onCheckItem(item)} checked={checkedList.includes(item)} > {item} </Checkbox> ))} </div> ); }} 这篇关于如何在reactjs中使用antd多个复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！