如何解决以编程方式显示 react-autosuggest 的建议
我在这里使用 react-autosuggest 库:https://react-autosuggest.js.org/ 现在,当用户单击输入框时,输入框下方会弹出输入建议列表,类似于下拉列表。但我还在输入框中添加了一个字体很棒的向下箭头。当它被点击时,什么也没有发生。我只是想让它显示与实际输入框相同的列表。
这是我渲染输入组件的方式:
const renderInputComponent = (inputProps) => (
<div className="inputContainer">
{selectedCustomer ? (
<FontAwesomeIcon
icon={faTimes}
size={'1x'}
onClick={() => {
setSelectedCustomer('');
setSuggestionValue('');
}}
/>
) : (
<FontAwesomeIcon
icon={faAngleDown}
size={'1x'}
onClick={() => {
??? <-- this is where I think I would put something to show those suggestions
}}
/>
)}
{/*<input {...inputProps} ref={autosuggestInput} />*/}
<input {...inputProps} />
{/* when I add in the above commented to code to show options when the caret is clicked,I get an error: https://github.com/moroshko/react-autosuggest/pull/631 */}
</div>
);
我创建了一个代码沙盒来展示我的请求。我在我认为代码应该去的地方添加了评论。 https://codesandbox.io/s/compassionate-ramanujan-yi9i8?file=/src/App.js
这是一张图片:
该下拉插入符号图标应显示与单击框相同的所有结果:
解决方法
您可以通过关注输入来触发下拉菜单。为此,只需创建一个引用即可:
const autosuggestInput = useRef(null);
...
<input {...inputProps} ref={autosuggestInput} />
当下拉图标被点击时,在元素上调用 setFocus()
<FontAwesomeIcon
icon={faAngleDown}
size={"1x"}
onClick={() => {
autosuggestInput.current.focus();
}}
/>
您可以在此处找到修复此问题的分叉存储库:https://codesandbox.io/s/confident-bash-bu789?file=/src/App.js:2875-3047
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。