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

Question

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

这是一张图片：

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

Answer 1

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

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

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

Programmatically show suggestions for react-autosuggest

autosuggest

reactjs