如何在语义 - 反应中创建完全受控的下拉列表

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属性，但它似乎是一个黑客。
2. 我需要自己实现handleItemClick，我看到original handleItemClick中有逻辑。

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

Answer 1

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

现在唯一的缺点是键盘导航不起作用：\

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

https://codesandbox.io/s/ql3q086l5q

Answer 2

1. 要解决第一个问题，请删除clearable={true}和text={tagOptions[1].value}
2. 什么handleItemClick功能应该做什么？