如何解决在react下拉组件中创建子标题
我已经使用react组件创建了一个下拉菜单。代码如下:
<Select
style={{ width: 300 }}
options={people}
onChange={this.choosePerson}
placeholder="Select person">
</Select>
person对象如下:
const people = [];
people.push({
label: 'John'
value: 'John'
});
people.push({
label: 'Mary'
value: 'Mary'
});
我想知道是否可以在此下拉菜单中包含子标题以便对人员(例如男人,女人)进行分组。使用普通的javascript脚本时,我已经找到了可能,但是我似乎找不到如何使用当前设置进行操作。
解决方法
我终于设法做到了:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。