如何在reactjs中使用antd多个复选框? [英] How to use antd multiple checkbox in reactjs?
本文介绍了如何在reactjs中使用antd多个复选框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用antd复选框.我正在使用值数组存储检查后的值，但是我需要存储未检查的值数组.
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>
))}
当前，当我选中checkbox时，它将为我提供值数组，例如["apple"，"Orange"]，但我想通过使用值数组[[Pear]]来保留未检查的值
未选中的预期输出: 未选中:[梨"]
这是我的代码sanbox:
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:
解决方案
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多个复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
