reactjs - 如何在语义-ui-react 中创建完全受控的下拉菜单

Question

我想创建一个完全受控的下拉菜单以便使用 react-window在其中显示非常长的项目列表。

我检查了文档，没有任何指定 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 属性，但它看起来像个 hack。
2. 需要自己实现handleItemClick，看到original handleItemClick里面有逻辑.

有什么建议吗？我错过了什么吗？

Answer 1

我可以通过在下拉列表中使用 ref 并传递原始 handleItemClick 方法来破解它。

目前唯一的缺点是键盘导航不起作用:\

似乎它不是为了完全控制而设计的。

https://codesandbox.io/s/ql3q086l5q