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

Question

我正在使用 combobox from React Widgets 作为搜索 UI 组件。

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

然而，当您 select 结果时，selected 项目的名称进入文本输入，这不是用户在 select a 时所期望的搜索结果。我认为他们希望搜索词保留，或者可能清除输入。

我喜欢 Combobox 组件，但还没有找到另一个 UI 小部件可以满足我的要求，所以我想找到一个解决方案。

有没有什么方法可以覆盖 selection 行为，这样点击列表项就不会 select 了？我试过设置 'onSelect' 属性但这并没有抑制默认的 selection 行为，它只是增加了额外的功能。

或者有没有办法手动将 selection 设置为空？文档似乎没有显示任何内容。我尝试使用 reactDOM 手动将输入节点的值设置为 ''，但该值没有改变。我猜是组件控制它。

我已将 Combobox 包装在功能组件中：

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"
/>
);
}

如果我设置了 Combobox 的 value 属性，那么就无法输入。

有什么建议吗？谢谢。

Answer 1

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

搜索结果末尾有一个手动添加的 'show more...' 条目。单击此按钮会增加该组的搜索限制。这是我想避免在文本输入中显示点击结果的主要原因。自定义输入不受用户选择的影响，始终显示搜索词。

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

<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>

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

React widgets combobox; how to clear input or prevent selection

combobox

react-widgets