为什么我的自动完成输入不起作用？

Question

你好新手在这里写我的第一个问题，我有一个输入字段，当我输入时它会过滤一个 json 文件，它会显示以相同字母开头的匹配位置（我正在尝试为天气应用程序构建自动完成搜索栏）。我遇到的问题是，当我单击其中一个元素时，它不会将输入文本设置为我一直在单击的内容。任何帮助都会很棒！谢谢！

Codesandbox 在这里：https://codesandbox.io/s/exciting-fire-vhvl5w

import data from "./city2.list.json";

const SearchBar = () => {
  const [input, setInput] = useState("");
  const [matchesArray, setMatchesArray] = useState([]);
  const [city, setCity] = useState("");

  const getCitySuggestions = (input) => {
    let matches = [];
    if (input !== "") {
      for (let i = 0; i < data.length && matches.length < 10; i++) {
        if (data[i].name.toLowerCase().startsWith(input.toLowerCase())) {
          matches.push({
            id: data[i].id,
            long: data[i].coord.lon,
            lat: data[i].coord.lat,
            name: data[i].name,
            country: data[i].country,
          });
          setMatchesArray(matches);
        }
      }
    }
    return matches;
  };
  useEffect(() => {
    getCitySuggestions(input);
  }, [input]);

  const handleClick = (e) => {
    e.preventDefault();
    let a = setCity(e.target.value);
    console.log("city is..", a);
  };

  return (
    <div>
      <form onSubmit={(e) => handleClick(e)}>
        <input
          type="text"
          name="search"
          id="search"
          placeholder="search..."
          onChange={(e) => setInput(e.target.value)}
        />
        <button type="submit">search..</button>
        {matchesArray.map((item, index) => (
          <div onClick={(e) => handleClick(e)} value={item.name} key={index}>
            {item.name}
          </div>
        ))}
      </form>
    </div>
  );
};

export default SearchBar;```

Answer 1

实际上你在函数中传递了错误的细节。让我分享正确的方法。

现在：

<div onClick={(e) => handleClick(e)} value={item.name} key={index}>
            {item.name}
          </div>

应该是：

<div onClick={handleClick.bind(this, item)} value={item.name} key={index}>
            {item.name}
          </div>

函数应该是这样的：

const handleClick = (item) => {
 
    setInput(item.name)
  };

试试这个，这将解决您输入的问题。

Answer 2

您可以简单地将城市名称作为参数传递给 onClick 方法。

{matchesArray.map((item, index) => (
   <div
    onClick={() => handleClick(item.name)}
    value={item.name}
    key={item.id}
    >
    {item.name}
    </div>
))}

然后在handleClick方法中，设置城市名称并输入。

const handleClick = (cityName) => {
    setCity((prev) => cityName);
    setInput((prev) => cityName);
  };

为什么我的自动完成输入不起作用？

Why my autocomplete input is not working?

javascript

input

searchbar

reactjs