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

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 }}>&nbsp; &nbsp; <OptGroup label="Man">&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; this.state.men.map(function(man) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<Option key = {man.value}> {man.label}</Option>);&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; </OptGroup>&nbsp; &nbsp; <OptGroup label="Women">&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; this.state.women.map(function(woman) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<Option key = {woman.value}> {woman.label}</Option>);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; }&nbsp; &nbsp; </OptGroup></Select>