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

问题描述

当点击搜索结果之一时，我试图用显示的搜索值填充输入字段。

我对 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>
))}    
)

解决方法

目前您没有传递任何要设置到 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>
))}    
)