0

我正在使用React Widgets 中的组合框作为搜索 UI 组件。

我已经放入了一个自定义渲染项，以便当您单击下拉列表中的搜索结果时，您可以导航到相关页面。

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

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

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

或者有没有办法手动将选择设置为空？文档似乎没有显示任何内容。我尝试使用 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 属性，则无法输入。

有什么建议么？谢谢你。

4

1 回答 1

0

我找到的解决方案是使用输入和按钮创建自己的搜索控件，并使用 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>
于 2020-01-09T12:45:21.903 回答