时间戳

首页 > 解决方案 > Semantic UI React Form Select - 设置选定值

javascript - Semantic UI React Form Select - 设置选定值

问题描述

在 Semantic UI React 中，我不知道如何设置下拉列表的选定值（例如，在编辑表单上）。以下是选项的出现方式：

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” 的底层代码）不能是对象。

标签： javascriptreactjsselectdropdownsemantic-ui

解决方案

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

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组件，它现在运行良好，尽管第一个选项仍然显示为选中但未激活。

推荐阅读