Semantic UI React Dropdown Search - 在关闭或输入时访问自动完成建议

Question

版本：

• 语义用户界面反应：^0.88.2
• 反应：^16.12.0

我有以下几点：

<Form.Select
    options={form.autocompleteOptions}
    search
    onSearchChange={handleAutocompleteSearch}
    label="CVE Code"
    placeholder="CVE Code"
/>

自动完成建议运行良好，当我按回车键时，呈现的标签会更改为菜单中的当前选项。但是，下拉列表的值没有更新，我找不到访问它的方法。我正在尝试从“onSearchChange”事件处理程序中访问该值。

在下面的所有示例中，我只能获取用户在搜索框中手动输入的任何内容，而不是“自动完成”值，即使 renderLabel 已更改。

我试过了：

1. 使用 onChange 事件处理程序，这永远不会触发
2. 直接使用 Dropdown 组件而不是 Form.Select，但我仍然无法访问更新后的值
3. 使用 onKeyDownHandler 来捕获用户按下“Enter”的任何时候。这个活动似乎也没有为我提供全部价值。
4. 使用 ref 访问 DOM 元素。我无法访问 ref，可能是我用错了。
5. 使用该值创建受控组件，但是我无法将状态更新为自动完成值，因为我无法从任何事件处理程序访问它。下拉菜单的图片如下：

似乎我可能需要使用语义 UI 搜索组件，因为它有一个 onResultSelect 事件处理程序，但我觉得它也应该可以使用下拉菜单。

Answer 1

Semantic-UI-React 将事件作为对象中的数据发出，由值组成 我会说尝试使用 onChange 事件处理程序作为

const handleChange = (e, data) => {
console.log(data.value);
};

或者如果搜索查询选项使用如下，

const handleSearch = (e, data) => {
console.log(data.searchQuery);
};

如果有帮助，请告诉我，参考官方文档here