语义用户界面 / 反应 |将下拉列表用作组

Question

我正在使用Semantic-UI/ReactJS，并希望使用DropDown组件作为group，但没有这样的选项，但是我用谷歌搜索了一下，并找到了一个提供这个的小提琴，但在独立semantic ui中不是为了reactjs，我如何将下拉列表用作组？

<Dropdown
id="Province"
search selection clearable
options={this.state.ProvinceData && this.state.ProvinceData.map(v => {
return {
key: v.id,
text: v.name,
value: v.id
}
})}
onChange={this.getProvince}
placeholder="-- Choose --"
value={this.state.provinceValue}
noResultsMessage={'Not Found!'}
/>

Answer 1

带有子级的下拉列表组件不能具有"选择"属性，这就是问题所在。虽然你可以"破解"它。请注意，这不是一个"干净"的解决方案，但在视觉上会有所不同。

假设您的"选项"对象数组如下所示：

[
{
key: v.id,
text: v.name,
value: v.id
},
...
]

您可以创建一个简单的 React 组件并根据需要设置其样式：

const OptGroupHeader = props => {
const { header } = props
return (
<div>
<hr />
<strong><i>{ header }</i></strong>
<hr />
</div>
)
}

现在，您可以做的是将其作为禁用选项提供，您可以在其中使用标头。

options.splice(x, 0, {
key: 'key - xxx', 
value: 'value', 
text: (<OptGroupHeader header='My Fancy Header' />), 
disabled: true
})

将呈现"text"属性中的组件。

Answer 2

使用<Dropdown.Header />和<Dropdown.Divider />

<Dropdown
id="Province"
search selection clearable
onChange={this.getProvince}
placeholder="-- Choose --"
value={this.state.provinceValue}
noResultsMessage={'Not Found!'}
<Dropdown.Menu>
<Dropdown.Divider />
<Dropdown.Header icon='tags' content='Group 1' />
<Dropdown.Item text='Text 1' />
<Dropdown.Item text='Text 2' />
<Dropdown.Item text='Text 3' />
<Dropdown.Divider />
<Dropdown.Header icon='tags' content='Group 2' />
<Dropdown.Item text='Text 4' />
<Dropdown.Item text='Text 5' />
<Dropdown.Item text='Text 6' />
</Dropdown.Menu>
</Dropdown>

只需按照上述方式迭代您的选项jsx