React：如何使用遍历的搜索值之一填充输入字段？

Question

当点击其中一个搜索结果时，我正在尝试使用显示的搜索值填充输入字段。

我对 React FC 和 Typescript 还很陌生。我不确定具体是如何完成的。这是我尝试使用点击处理程序的方法，但点击处理程序不会使用正在点击的值填充输入字段。

  const [searchTerm, setSearchTerm] = React.useState<string>('');

  const [results, setResults] = React.useState<string[]>([]);


 const handleClick = () => {
setSearcTerm(searchTerm);
  };

React.useEffect(() => {}

return(

 <Input
    onChange={(event) => setSearchTerm(event.target.value)}
    value={searchTerm}
    type="search"
  />

{results.length > 0 && (
{results.map((result, index) => (
  <div key={index}>
    <div onClick={handleClick}> {result}</div>
  </div>
))}    
)

Answer 1

目前您没有传递任何要设置为 searchTerm 的输入值。

你可以这样做：

const handleClick = (input:string) => {
  setSearcTerm(input);
};

return(

 <Input
    onChange={(event) => setSearchTerm(event.target.value)}
    value={searchTerm}
    type="search"
  />

{results.length > 0 && (
{results.map((result, index) => (
  <div key={index}>
    <div onClick={()=>handleClick(result)}> {result}</div>
  </div>
))}    
)