语义 UI 反应表单选择 - 设置所选值

Question

在语义UI反应中，我不知道如何设置下拉列表的选定值(例如，在编辑表单上(。以下是选项的由来方式：

const options = users.map(user => ({
key: user.id,
text: user.name,
value: user,
}))

表单看起来像这样。我尝试设置defaultValue、value等，但还没有对我有用。

<Form.Field>
<Form.Select
fluid
selection
label="Users"
name="users"
options={options}
defaultValue={user}
onChange={this.handleSelectChange}
/>
</Form.Field>

我认为defaultValue需要像这样：

{ key: 1, text: 'Tania', value: tania }

但根据这篇文章，Dropdown 的默认值(显然是 Select "sugar" 的底层代码(不能是一个对象。

Answer 1

所以，我的解决方案是做这样的事情：

const options = users.map(user => {
if (user.name === selectedUser.name) {
return {
key: user.id,
text: user.name,
value: user,
active: true,
selected: true,
}
}
return {
key: user.id,
text: user.name,
value: user,
}
})

我还text={user.name}设置为Select组件，它现在运行良好，尽管第一个选项仍然显示为选中但不活动。