我正在使用react 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}/>) 

怎么做？

这是我的 codesanbox：https ://codesandbox.io/s/4k6qi ? file =/ index.js