如何在reactjs中使用antd多个复选框? [英] How to use antd multiple checkbox in reactjs?
问题描述
我正在使用 antd 复选框.我正在使用 value 数组存储检查值,但我需要存储 unchecked 值数组.
const plainOptions = ["Apple", "Pear", "Orange"];const defaultCheckedList = ["Apple", "Orange"];状态 = {已检查列表:默认检查列表};onChange = 选中列表 =>{this.setState({检查列表});};onCheckAllChange = e =>{this.setState({已检查列表:e.target.checked ?普通选项:[]});};onCheckItem = 值 =>e =>{this.setState({已检查列表:this.state.checkedList.includes(value)?this.state.checkedList.filter(x => x !== 值): [...this.state.checkedList, value]});};//这是全部选中的,当用户点击这个选中的框时,它将存储值数组.<复选框不确定={checkList.length <plainOptions.length &&checkList.length >0}onChange={this.onCheckAllChange}选中={checkedList.length === plainOptions.length}>选择所有</复选框>{plainOptions.map((item, idx) => (<复选框键={项目+ idx}onChange={this.onCheckItem(item)}选中={checkedList.includes(item)}>{物品}</复选框>))}
目前,当我选中 checkbox 时,它会给我一个值数组,例如 ["apple","Orange"],但我想通过使用值数组 ["Pear"] 来保持存储未选中的值>
未检查的预期输出:未选中:["梨"]
这是我的密码箱:
const plainOptions = ["Apple", "Pear", "Orange"];const defaultCheckedList = ["Apple", "Orange"];类 App 扩展了 React.Component {状态 = {选中列表:默认选中列表,未选中列表:[]};onChange = 选中列表 =>{this.setState({检查列表});};onCheckAllChange = e =>{this.setState({已检查列表:e.target.checked ?普通选项:[],uncheckedList: e.target.checked ?[] : 普通选项});};onCheckItem = 值 =>e =>{这个.setState({已检查列表:this.state.checkedList.includes(value)?this.state.checkedList.filter(x => x !== 值): [...this.state.checkedList, value]},() =>{this.setState({uncheckedList:plainOptions.filter(=>!this.state.checkedList.includes(o))});});};使成为() {const {checkedList, uncheckedList } = this.state;console.log(uncheckedList);返回 (<div><div className="site-checkbox-all-wrapper"><复选框不确定={checkList.length <plainOptions.length &&checkList.length >0}onChange={this.onCheckAllChange}选中={checkedList.length === plainOptions.length}>选择所有</复选框>
<br/>{plainOptions.map((item, idx) => (<复选框键={项目+ idx}onChange={this.onCheckItem(item)}选中={checkedList.includes(item)}>{物品}</复选框>))}
);}}
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屋!