语义UI React Form Select-设置所选值

Question

In Semantic UI React, I can't figure out how to set the selected value of a dropdown (on an edit form, for example). Here's how the options come in:

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

And the form looks like this. I've tried setting the defaultValue , value , etc, but nothing has worked for me yet.

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

I would assume the defaultValue needs to be something like:

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

But according to this post , the default value of a Dropdown (which is apparently the underlying code of Select "sugar") can't be an object.

Answer 1

So, my solution was to do something like this:

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

I also set text={user.name} to the Select component and it works well enough now, though the first option still appears selected-but-not-active.