以编程方式显示 react-autosuggest 的建议

编程问答 2022-05-26

问题描述

我在这里使用 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

这是一张图片：

enter image description here

该下拉插入符号图标应显示与单击框相同的所有结果：

enter image description here

解决方法

您可以通过关注输入来触发下拉菜单。为此，只需创建一个引用即可：

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

autosuggestautosuggestreactjsreactjsreactjsreactjs