![CheckboxGroup]( "CheckboxGroup")
本文介绍了如何选择多个复选框reactjs?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用反应 antd.这段代码运行良好，但我想替换 <CheckboxGroup/> .现在，我只是在 <CheckboxGroup/> 内传递 plainOptions 数组而没有循环，但现在我想通过使用 plainOptions 数组来循环单个 .
例如:plainOptions.map(item=><Checkbox value={item} onChange{this.onChange}/>) )//我的代码是这样的const plainOptions = ['Apple', 'Pear', 'Orange'];const defaultCheckedList = ['Apple', 'Orange'];类 App 扩展了 React.Component {状态 = {选中列表:默认选中列表，不确定:真实，全部检查:假，};onChange = 选中列表 =>{this.setState({检查列表，不确定:!!checkedList.length &&checkList.length <普通选项.长度，checkAll:checkedList.length === plainOptions.length，});};onCheckAllChange = e =>{this.setState({已检查列表:e.target.checked ?普通选项:[]，不确定:假，checkAll: e.target.checked,});};<div className="site-checkbox-all-wrapper"><复选框不确定={this.state.indeterminate}onChange={this.onCheckAllChange}已检查={this.state.checkAll}>选择所有</复选框>
<br/><复选框组选项={plainOptions}值={this.state.checkedList}onChange={this.onChange}/>
我想使用
例如:plainOptions.map(item=><Checkbox value={item} onChange{this.onChange}/>)
怎么做?
这是我的 codesanbox:
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>
);
}
这篇关于如何选择多个复选框reactjs?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！