Как создать полностью управляемый выпадающий в семантическом UI-реагировать

Question

Я хочу создать полностью управляемый раскрывающийся список, чтобы использовать реагирующее окно для отображения в нем действительно длинного списка элементов.

Я проверил документы, и нетлюбой пример управляемого раскрывающегося списка с указанием Dropdown.Item.

Вот так выглядит мой компонент:

<Dropdown
  placeholder="Filter Posts"
  clearable={true}
  search={true}
  onChange={this.handleChange}
  text={tagOptions[1].value}
  value={tagOptions[1].value}
  onSearchChange={this.handleChange}
>
  <Dropdown.Menu>
    {tagOptions.map(option => (
      <Dropdown.Item key={option.value} {...option} onClick={this.handleItemClick} />
    ))}
  </Dropdown.Menu>
</Dropdown>;

Я столкнулся с двумя проблемами:

1. Начальное значение не появляется, я копаюсь в коде и вижу, что если я не передам options свойство, оно не найдет заданное значение, поэтому оно не будет показано.Я могу использовать свойство text, но это похоже на хак.
2. Мне нужно самостоятельно реализовать handleItemClick, и я вижу, что в оригинальном handleItemClick есть логика.

Есть предложения?я что-то здесь упустил?

Answer 1

Я смог взломать его, используя ref в раскрывающемся списке и передав оригинальный метод handleItemClick.

Единственным недостатком на данный момент является то, что навигация с помощью клавиатуры не работает: \

Похоже, он не предназначен для полного контроля.

https://codesandbox.io/s/ql3q086l5q

Answer 2

1. Для решения первой проблемы удалите clearable={true} и text={tagOptions[1].value}

2. Что должна делать функция handleItemClick