Question

我使用蚂蚁设计创建了复选框组件。如果单击“所有复选框”，则需要自动触发复选框组项

这是我的代码

 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函数不会更改任何检查列表。您只是将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设计处理复选框组功能

1 个答案: