如何将建议框添加到 React 中的文本输入答案

【问题标题】：How to add suggestion box to text input in React如何将建议框添加到 React 中的文本输入
【发布时间】：2020-06-23 19:10:39
【问题描述】：

我有一个带有 onChange 属性的输入，它调用一个函数来更新我的 prop 以存储我想要显示的三个建议。这些建议存储在字符串数组中。如何像自动完成功能一样在输入下方显示这些值？

目前使用 react typescript 和 bootstrap

【问题讨论】：

到目前为止你做了什么，你有什么问题
@Amir-Mousavi 我很难从文本框中呈现建议下拉菜单。我有输入，我可以根据输入获得适当的建议，并将它们存储到字符串数组中。我不知道如何在输入下方显示这些值，以便用户根据需要点击

标签： reactjs typescript twitter-bootstrap autocomplete

【解决方案1】：

这就是您应该如何处理下拉建议。我对 react bootstrap 不是很熟悉，但总体思路如下：

import React, { useState, useRef, useEffect, Fragment } from "react";
const SuggestionsInput = () => {
  const [ value, setValue ] = useState("");
  const [ showDropdown, setShowDropdown ] = useState(false);
  const wrapperRef = useRef(null);
  const suggestions = "a, aa, b, bb, cc, d, dd, e, ee";
  const suggestionArr = suggestions
    .split(", ")
    .filter(suggestion =>
      suggestion.toLowerCase().includes(value.toLowerCase())
    );
  const changeHandler = e => {
    setValue(e.target.value);
  };

  const handleClickOutside = e => {
    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
      setShowDropdown(false);
    }
  };

  // Attaching the previous event with UseEffect hook
  useEffect(() => {
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div className="input__wrapper" ref={wrapperRef}>
      <input
        type="text"
        onChange={changeHandler}
        onFocus={() => setShowDropdown(true)}
        value={value}
      />
      {showDropdown && (
        <div className="suggestions__dropdown">
          {suggestionArr && suggestionArr.length > 0 ? (
            <Fragment>
              {suggestionArr.map((suggestion, index) => (
                <div
                  key={"suggestion_" + index}
                  className="suggestion__item"
                  onClick={() => setValue(suggestion)}
                />
              ))}
            </Fragment>
          ) : (
            <div className="no__suggestions">No suggestions found</div>
          )}
        </div>
      )}
    </div>
  );
};

你应该添加这个 css：

.input__wrapper {
  position: relative;
}
.input__wrapper .suggestions__dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow-y: auto;
}

【讨论】：