在 React 下拉组件中创建 sub-headings

Question

我使用 React 组件创建了一个下拉菜单。代码如下：

<Select
    style={{ width: 300 }}
    options={people}
    onChange={this.choosePerson}
    placeholder="Select person">
</Select>

object人如下：

const people = [];
people.push({
  label: 'John'
  value: 'John'
});
people.push({
  label: 'Mary'
  value: 'Mary'
});

我想知道是否可以在此下拉菜单中使用 sub-headings 来对人员进行分组（例如男性、女性）。我发现使用普通 javascript 是可行的，但我似乎无法找到如何使用我目前的设置来做到这一点。

Answer 1

我终于这样实现了：

<Select defaultValue="Select Person" onChange={this.selectPerson} style={{ width: 300 }}>
    <OptGroup label="Man">
    {
      this.state.men.map(function(man) {
          return (<Option key = {man.value}> {man.label}</Option>);
      })
    }
    </OptGroup>
    <OptGroup label="Women">
       {
        this.state.women.map(function(woman) {
            return (<Option key = {woman.value}> {woman.label}</Option>);
         })
    }
    </OptGroup>
</Select>

在 React 下拉组件中创建 sub-headings

Create sub-headings in a react dropdown component

javascript

drop-down-menu

reactjs