I am using react antd. this code is worked perfectly, but I want to replace <CheckboxGroup/>
. Now, I am just pass plainOptions array inside <CheckboxGroup/>
without looping, but right now I want to do loop single <Checkbox>
by using plainOptions array.
For example : plainOptions.map(item=><Checkbox value={item} onChange
{this.onChange}/>) ) // My code would be like this
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
class App extends React.Component {
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
};
<div className="site-checkbox-all-wrapper">
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<CheckboxGroup
options={plainOptions}
value={this.state.checkedList}
onChange={this.onChange}
/>
I want to use <Checkbox/>
instead of CheckboxGroup. My code would be like this
For example : plainOptions.map(item=><Checkbox value={item} onChange
{this.onChange}/>)
How it can be done?
Here is my codesanbox: https://codesandbox.io/s/4k6qi?file=/index.js
There is no need for multiple states, keep one single source ( checkedList
) would be fine.
onCheckItem = value => e => {
const { checkedList } = this.state;
this.setState({
checkedList: checkedList.includes(value)
? checkedList.filter(x => x !== value)
: [...checkedList, value]
});
};
render() {
const { checkedList } = this.state;
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>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.