Reactjs 使用数组对象对Antd中的复选框进行分组

下面是我需要的

antd

组复选框的原始示例及其优点：

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

  render() {
    return (
      <div>
        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <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}
        />
      </div>
    );
  }

---

我想在本例中使用attribute

name

作为键。

看起来您所说的唯一区别是使用对象数组而不是字符串？如果是这种情况，在循环数组以创建复选框时，可以使用点表示法访问对象属性。如果我正确理解这个问题，它应该是这样的

From CheckboxGroup component:

this.props.options.forEach(el => {
  let name = el.name;
  let id = el.id;

  //rest of code to create checkboxes

  or to show an example in creating components

  let checkboxMarkup = [];
  checkboxMarkup.push(
    <input type="checkbox" id={el.id} name={el.name} key={`${el.id} - ${el.name}`}/>
  );
}

来自CheckboxGroup组件的

：
this.props.options.forEach（el=>{
设name=el.name；
设id=el.id；
//创建复选框的其余代码
或显示创建组件的示例
让checkboxMarkup=[]；
checkboxMarkup.push(
);
}

---

在本例中，“el”指的是在数组中循环时的每个单独对象。不必将其指定给变量，我只是用它来演示如何访问属性的示例。

看起来您所说的唯一区别是使用对象数组而不是字符串？如果是这样，当循环时通过遍历数组来创建复选框，您可以使用点表示法访问对象属性。如果我正确理解问题，应该是这样的

From CheckboxGroup component:

this.props.options.forEach(el => {
  let name = el.name;
  let id = el.id;

  //rest of code to create checkboxes

  or to show an example in creating components

  let checkboxMarkup = [];
  checkboxMarkup.push(
    <input type="checkbox" id={el.id} name={el.name} key={`${el.id} - ${el.name}`}/>
  );
}

来自CheckboxGroup组件的

：
this.props.options.forEach（el=>{
设name=el.name；
设id=el.id；
//创建复选框的其余代码
或显示创建组件的示例
让checkboxMarkup=[]；
checkboxMarkup.push(
);
}

---

在本例中，“el”指的是在数组中循环时的每个单独对象。不必将其指定给变量，我只是用它来演示如何访问属性的示例。

看起来您所说的唯一区别是使用对象数组而不是字符串？如果是这样，当循环时通过遍历数组来创建复选框，您可以使用点表示法访问对象属性。如果我正确理解问题，应该是这样的

From CheckboxGroup component:

this.props.options.forEach(el => {
  let name = el.name;
  let id = el.id;

  //rest of code to create checkboxes

  or to show an example in creating components

  let checkboxMarkup = [];
  checkboxMarkup.push(
    <input type="checkbox" id={el.id} name={el.name} key={`${el.id} - ${el.name}`}/>
  );
}

来自CheckboxGroup组件的

：
this.props.options.forEach（el=>{
设name=el.name；
设id=el.id；
//创建复选框的其余代码
或显示创建组件的示例
让checkboxMarkup=[]；
checkboxMarkup.push(
);
}

---

在这种情况下，“el”指的是在数组中循环时的每个单独对象。不必将其指定给变量，我只是用它来演示如何访问属性的示例。

问题已解决。我应该使用“与网格一起使用”组复选框的类型。它接受对象数组。我唯一能做的就是创建一个函数，将“标签”和“值”注入到我的对象中。它进行了一些复制，但没有问题

function groupeCheckboxify(obj, labelFrom) {
    for (var i = 0; i < obj.length; i++) {
      if (obj[i][labelFrom]) {
        obj[i]['label'] = obj[i][labelFrom];
        obj[i]['value'] = obj[i][labelFrom];
      }
      if (i == obj.length - 1) {
        return obj;
      }
    }
}

// for calling it:
groupeCheckboxify( myObject , 'name');

功能组ECECKBOxify（obj，labelFrom）{
对于（变量i=0；i

问题已解决。我应该使用“与网格一起使用”类型的组复选框。它接受对象数组。我唯一能做的就是创建一个函数，将“标签”和“值”注入到我的对象中。它会生成一些重复项，但没有问题

function groupeCheckboxify(obj, labelFrom) {
    for (var i = 0; i < obj.length; i++) {
      if (obj[i][labelFrom]) {
        obj[i]['label'] = obj[i][labelFrom];
        obj[i]['value'] = obj[i][labelFrom];
      }
      if (i == obj.length - 1) {
        return obj;
      }
    }
}

// for calling it:
groupeCheckboxify( myObject , 'name');

功能组ECECKBOxify（obj，labelFrom）{
对于（变量i=0；i

问题已解决。我应该使用“与网格一起使用”类型的组复选框。它接受对象数组。我唯一能做的就是创建一个函数，将“标签”和“值”注入到我的对象中。它会生成一些重复项，但没有问题

function groupeCheckboxify(obj, labelFrom) {
    for (var i = 0; i < obj.length; i++) {
      if (obj[i][labelFrom]) {
        obj[i]['label'] = obj[i][labelFrom];
        obj[i]['value'] = obj[i][labelFrom];
      }
      if (i == obj.length - 1) {
        return obj;
      }
    }
}

// for calling it:
groupeCheckboxify( myObject , 'name');

功能组ECECKBOxify（obj，labelFrom）{
对于（变量i=0；i

是的，你解除了我的问题，但我没有得到我应该把代码放在哪里？！这是Atnd中内置的模块，我仍然想使用它。选项列表是一个数组列表，我无法为它定义自定义是的，你解除了我的问题，但我没有得到我应该把代码放在哪里？！这是Atnd中内置的模块，我仍然想告诉我们选项列表是一个数组列表，我不能为它定义自定义。是的，你解决了我的问题，但我没有得到我应该把这个代码放在哪里？！这是Atnd中内置的模块，我仍然想使用它。选项列表是一个数组列表，我不能为它定义自定义。你会不会碰巧知道如何将它与check all功能一起使用稳定性？由于此解决方案不再使用本地状态与复选框组一起工作，您是否知道如何将其与“全部检查”功能一起使用？由于此解决方案不再使用本地状态与复选框组一起工作，您是否知道如何将其与“全部检查”功能一起使用？因为此解决方案不再使用复选框组使用复选框组的本地状态