javascript - 如何选择多个复选框reactjs?
问题描述
我正在使用反应 antd。此代码运行良好,但我想替换<CheckboxGroup/>
。现在,我只是在<CheckboxGroup/>
没有循环的情况下传递 plainOptions 数组,但现在我想<Checkbox>
通过使用 plainOptions 数组来循环单次。
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}
/>
我想使用<Checkbox/>
而不是 CheckboxGroup。我的代码是这样的
For example : plainOptions.map(item=><Checkbox value={item} onChange
{this.onChange}/>)
怎么做?
这是我的代码框: https ://codesandbox.io/s/4k6qi ?file=/index.js
解决方案
不需要多个状态,保留一个源 ( checkedList
) 就可以了。
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>
);
}
推荐阅读
- javascript - 反应父组件从子组件加起来不准确
- reactjs - reactjs 错误:如果您打算渲染一组子项,请改用数组
- python - 如何将 SelectKBest 的输出传递给 cross_val_score 函数?
- c# - 根据固定的类型列表多次调用泛型方法
- android-fragments - 在 Kotlin 的片段中调用 setSupportActionBar 时出错
- google-cloud-platform - 如何在 GCP 中创建相同的实例
- lua - [lua]:值为 1 的键与常规 1 的作用不同
- mysql - 具有许多表的 MySQL 内存使用情况
- python - 获取 pandas.DataFrame 其余部分的最聪明方法是什么?
- c# - 变量不保存值