响应小部件组合框；如何清除输入或防止选择
响应小部件组合框；如何清除输入或防止选择
提问于 2020-01-03 20:18:36
我使用来自React小部件的组合框作为搜索UI组件。
我已经设置了一个自定义呈现项，以便当您单击下拉列表中的搜索结果时，可以导航到相关页面。
但是，当您选择一个结果时，所选项目的名称将进入文本输入，这不是用户在选择搜索结果时所期望的。我想他们会希望搜索词保留下来，或者可能是输入被清除。
我喜欢Combobox组件，但是还没有找到另一个UI小部件来做我想做的事情，所以我想找到一个解决方案。
是否有什么方法可以覆盖选择行为，从而使单击列表项不会选择它？我尝试过设置'onSelect‘属性，但这并不会抑制默认的选择行为，它只是添加了额外的功能。
或者，是否有一种手动将选择设置为null的方法？医生们似乎什么也没拿出来。我尝试用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"
/>
);
}如果我设置了组合框的值支柱，那么就不可能键入它。
有什么建议吗？谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-09 12:45:21
我找到的解决方案是使用输入和按钮创建自己的搜索控件，并使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59584856
复制相关文章
相似问题
腾讯云开发者
