Question

嗨，我真的很想帮助您了解如何制作搜索过滤器。我希望能够在输入字段中输入一些文本，以便 ul 列表过滤器使用相同的字母。

interface ICrypto {
  id: string;
  name: string;
}

const defaultProps:ICrypto[] = [];

const Dashboard: React.FC = () => {
  const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) => void] = React.useState(defaultProps);
  const [search, setSearch]: [string, (search: string) => void] = React.useState("");

  const handleChange = (e: { target: { value: string; }; }) => {
    setSearch(e.target.value);
  };

  const filteredCoins = crypto.filter(crypto =>
    crypto.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="App">
     <ul className="posts">
       <input type="text"></input>
         {crypto.map((crypto) => (
           <li key={crypto.id}>
            <h3>{crypto.id}</h3>
              <p>{crypto.current_price}</p>
              <p>{crypto.symbol}</p>
                <img src={crypto.image} alt="image" />
           </li>
         ))}
     </ul>
  {error && <p className="error">{error}</p>}
</div>
  )
}

Answer 1

所以过滤逻辑看起来不错，但你缺少的是设置搜索输入状态。

改变这一行

<input type="text"></input>

为此：

<input type="text" value={search} onChange={(e) => setSearch(e.target.value)}></input>

Answer 2

const Dashboard: React.FC = () => {
  const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) => void] = React.useState(defaultProps);
  const [search, setSearch]: [string, (search: string) => void] = React.useState("");

  const handleChange = (e: { target: { value: string; }; }) => {
    setSearch(e.target.value);
  };

  return (
    <div className="App">
     <ul className="posts">
       <input type="text" onChange={handleChange} />
         {crypto.map((crypto) => {
             if (search == "" || crypto.name.toLowerCase().includes(search.toLowerCase())) {
                 return (
                     <li key={crypto.id}>
                         <h3>{crypto.id}</h3>
                         <p>{crypto.current_price}</p>
                         <p>{crypto.symbol}</p>
                         <img src={crypto.image} alt="image" />
                     </li>
                 );
             }
             return null;
         )}
     </ul>
     {error && <p className="error">{error}</p>}
   </div>
  )
}

使用 react 和 typescript 制作搜索过滤器

2 个答案: