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

问题描述 投票:0回答:1

在Semantic UI React中,我无法弄清楚如何设置下拉列表的选定值(例如,在编辑表单上)。以下是选项的来源:

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

表格看起来像这样。我已经尝试过设置defaultValuevalue等,但是没有任何东西对我有用。

<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 }

但根据this postDropdown的默认值(显然是Select“糖”的基本代码)不能成为对象。

javascript reactjs select dropdown semantic-ui
1个回答
0
投票

所以,我的解决方案是做这样的事情:

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

© www.soinside.com 2019 - 2024. All rights reserved.