Как добавить поле предложения для ввода текста в React

Question

У меня есть вход с атрибутом onChange, который вызывает функцию, которая обновляет мой реквизит, чтобы сохранить три предложения, которые я хочу отобразить. Эти предложения хранятся в строковом массиве. Как я могу отобразить эти значения под вводом, как функция автозаполнения?

В настоящее время используется машинопись и bootstrap

Answer 1

Вот как вы должны обрабатывать выпадающие предложения. Я не очень знаком с реакцией 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;
}