如何使用 Ant design 处理 Checkbox 组功能

Question

我使用 ant design 创建了复选框组件。如果我点击选中所有复选框，那么我需要自动触发复选框组项目

这是我的代码

 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,
    });
}

你能帮帮我吗？

Answer 1

在您的代码示例中，onCheck 函数不会更改任何 checkedlist.You 只是将 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,
    });
  }
}

如何使用 Ant design 处理 Checkbox 组功能

How to handle Checkbox group functions using Ant design

checkbox

reactjs

antd