在反应下拉组件中创建子标题

Question

我使用反应组件创建了一个下拉菜单。代码如下：<Select    style={{ width: 300 }}    options={people}    onChange={this.choosePerson}    placeholder="Select person"></Select>人对象如下：const people = [];people.push({  label: 'John'  value: 'John'});people.push({  label: 'Mary'  value: 'Mary'});我想知道是否可以在此下拉菜单中包含子标题以便对人员进行分组（例如男性、女性）。我发现使用普通 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>