React：如何将点击的搜索结果填充到Input输入框中

修正后可运行的完整代码 #

import React from 'react';
// 此处Input为你项目中使用的输入组件，可保留原有引入逻辑
const SearchDemo: React.FC = () => {
  const [searchTerm, setSearchTerm] = React.useState<string>('');
  const [results, setResults] = React.useState<string[]>([]);

  // 接收点击的搜索结果作为入参
  const handleClick = (targetResult: string) => {
    setSearchTerm(targetResult);
  };

  React.useEffect(() => {
    // 此处补全你的搜索逻辑，例如输入关键词后调用接口获取结果，更新results数组
  }, [searchTerm]);

  return (
    <>
      <Input
        onChange={(event) => setSearchTerm(event.target.value)}
        value={searchTerm}
        type="search"
      />
      {results.length > 0 && (
        <div className="search-result-wrap">
          {results.map((result, index) => (
            <div key={index}>
              <div onClick={() => handleClick(result)}>{result}</div>
            </div>
          ))}
        </div>
      )}
    </>
  )
}

原代码存在的问题： #

• 状态更新函数拼写错误：setSearcTerm缺少字母h，正确调用名为setSearchTerm
• 点击处理逻辑缺失参数：原handleClick没有接收被点击的搜索结果值，始终赋值当前输入框的searchTerm，不会产生内容更新，需要在绑定点击事件时传入当前遍历的result
• 多处语法不完整：useEffect未补全依赖数组与闭合括号，搜索结果渲染区域的JSX括号未正确配对，会直接触发编译报错

内容的提问来源于stack exchange，提问作者Waiz