如何使用 Ant 设计处理 Checkbox 组功能答案

【问题标题】：How to handle Checkbox group functions using Ant design如何使用 Ant 设计处理 Checkbox 组功能
【发布时间】：2019-01-22 03:48:57
【问题描述】：

我使用ant design创建了checkbox组件。如果我点击check all box那么我需要自动触发checkbox group items

这是我的代码

 constructor(props) {
    super(props);
    this.state = {
        checkedList: [],
        checkAll: false,
    };
}

 <Checkbox onChange={this.onCheck}
           checked={this.state.checkAll} value={10}>check all</Checkbox>
  <Checkbox.Group onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%',marginLeft:'5%',fontWeight:'lighter' }}>
         <Checkbox value={101}>option 1</Checkbox> <br />
         <Checkbox value={102}>option 2</Checkbox>
 </Checkbox.Group>



onCheck =(e)=>{
    this.setState({
        checkAll: e.target.checked,
    });
    ;
}
onGroupChange=(checkedList)=>{
    this.setState({
        checkedList,
        checkAll: checkedList,
    });
}

你能帮帮我吗？

【问题讨论】：

标签： reactjs checkbox antd

【解决方案1】：

在您的代码示例中，onCheck 函数不会更改任何已检查列表。您只是将 checkAll 状态更改为 true。所以它不会更新复选框。这是我针对您的问题的两种不同解决方案。

const onloadOptions = [
  { label: 'option 1', value: 101 },
  { label: 'option 2', value: 102 }
];

class App extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        checkedList: [],
        checkAll: false,
      };
  }

  onCheck = (e) => {
    const values= onloadOptions.map(record => record.value)
    this.setState({
      checkAll: e.target.checked,
      checkedList: e.target.checked ? values : [],
    });
    ;
  }

  onGroupChange = (checkedList) => {
    this.setState({
      checkedList,
      checkAll: checkedList.length === onloadOptions.length,
    });
  }

  render() {
    console.log();
    return (
      <div>
        <Checkbox onChange={this.onCheck}
          checked={this.state.checkAll} >check all</Checkbox>
        <Checkbox.Group options={onloadOptions} onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%', marginLeft: '5%', fontWeight: 'lighter' }}>

          </Checkbox.Group>
      </div>
    );
  }


}

这与您的方法类似，但由于我们无法预测选项的数量，我会选择上述方式而不是以下方式。

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      checkedList: [],
      checkAll: false,
    };
  }

  render() {
    return (
      <div>
        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <Checkbox
            onChange={this.onCheck}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <Checkbox.Group value={this.state.checkedList} onChange={this.onGroupChange} >
          <Checkbox value={101}>option 1</Checkbox>
          <Checkbox value={102}>option 2</Checkbox>
        </Checkbox.Group>
      </div>
    );
  }

  onGroupChange = (checkedList) => {
    this.setState({
      checkedList,
    });
  }

  onCheck = (e) => {
    this.setState({
      checkedList: e.target.checked ? [101,102] : [],
      checkAll: e.target.checked,
    });
  }
}

【讨论】：