Combobox 反应小部件组合框；如何清除输入或阻止选择

我正在使用作为搜索UI组件

我已经加入了一个自定义的呈现项，这样当您单击下拉列表中的搜索结果时，您就可以导航到相关页面

但是，当您选择一个结果时，所选项目的名称会进入文本输入，这不是用户在选择搜索结果时所期望的。我想他们会希望搜索词保留下来，或者输入被清除

我喜欢Combobox组件，但还没有找到另一个UI小部件可以实现我想要的功能，所以我想找到一个解决方案

是否有某种方法覆盖选择行为，以便单击列表项时不会选择它？我尝试设置“onSelect”属性，但这并没有抑制默认的选择行为，它只是添加了额外的功能

或者，是否有方法手动将选择设置为空？这些文件似乎没有显示任何东西。我尝试使用reactDOM手动将输入节点的值获取到“”，但该值没有更改。我猜是组件控制了它

我已将组合框包装在一个功能组件中：

function Search(props) {
...

const onSelect = (value) => {
    const node = ReactDOM.findDOMNode(Search._combobox);
    const input = node.getElementsByTagName('input')[0];
    input.value = '';
}

return (
<Combobox
    ref={(c) => Search._combobox = c}
    onSelect={onSelect}
    textField="name"
    valueField="_id"
/>
);
}

功能搜索（道具）{
...
const onSelect=（值）=>{
const node=ReactDOM.findDOMNode（Search.\u组合框）；
const input=node.getElementsByTagName（'input'）[0]；
input.value=''；
}
返回(
搜索。_combobox=c}
onSelect={onSelect}
textField=“名称”
valueField=“\u id”
/>
);
}

如果我设置了组合框的值prop，那么就不可能在其中键入内容

---

有什么建议吗？谢谢。

我找到的解决方案是使用输入和按钮创建自己的搜索控件，并使用display:none隐藏本机输入和按钮。“componentDidUpdate”检测新搜索结果何时到达，并打开下拉列表显示它们

在搜索结果的末尾有一个手动添加的“显示更多…”条目。单击此按钮可增加该组的搜索限制。这就是我希望避免在文本输入中显示单击结果的主要原因。自定义输入不受用户选择的影响，它始终显示搜索词

我的搜索组件现在看起来像这样：

<div className="search">
    <div className="search-controls">
        <Input
            onChange={this.onChangeInput}
            type="text"
        />
        <Button
            onClick={this.toggleOpen}
            title="toggle results"
        >
            <FontAwesomeIcon icon={['fas', 'search']} style={{ 'color': iconColors.default }} size="1x" />
        </Button>
    </div>
    <Combobox
        busy={isSearching}
        data={searchResults}
        onChange={() => {}}
        open={open}
        onSelect={this.onSelect}
        textField="name"
        valueField="_id"
    />
</div>

{}}
open={open}
onSelect={this.onSelect}
textField=“名称”
valueField=“\u id”
/>