如何选择多个复选框reactjs? [英] How to select multiple checkbox 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}/>

我想使用 而不是 CheckboxGroup.我的代码是这样的

 例如: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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！