使用钩子RE在REACT中的简单搜索表单。

搜索是Web应用程序最重要的组件之一。让我们举一个电子商务平台的例子，其中有数千种商品在售，但要找到您要查找的特定商品，您需要使用平台提供的搜索组件搜索该商品。

今天我们将学习构建一个简单的搜索表单，该表单使用react从数据列表中搜索。

设置项目

要设置项目，您可以使用其中任何一个 create-react-app 或者你也可以去CodeSandBox。
您可以在此处找到有关设置反应项目的文章。

在创建项目之后，首先，让我们创建一个具有输入字段的简单UI，并显示搜索结果列表。

去吧 index.js 文件位于项目的根目录并清理其中的所有代码并添加以下代码。

import React from "react"; import ReactDOM from "react-dom";  function App() {   return (     <div className="App">       <input         type="text"         placeholder="Search"       />       <ul>         <li>Item 1li>         <li>Item 2li>       ul>     div>   ); }  

在上面的组件中，我们创建了一个简单的输入表单（当前没有做任何事情）和一个将要显示的结果的模拟列表。

现在我们将双向数据绑定应用于输入字段，它基本上从用户获取值并将其保存到状态。

import React from "react"; import ReactDOM from "react-dom";  function App() {  const (searchTerm, setSearchTerm) = React.useState("");   const handleChange = event => {     setSearchTerm(event.target.value);   };   return (     <div className="App">       <input         type="text"         placeholder="Search"         value={searchTerm}         onChange={handleChange}       />       <ul>         <li>Item 1li>         <li>Item 2li>       ul>     div>   ); } 

我们现在创建了一个名为的州 searchTerm 它可以在每次出现时保存搜索输入中的数据 change 事件。该 handleChange 方法需要 event object作为争论并将表单的当前值设置为 searchTerm 国家使用 setSearchTerm 方法提供 React.useState 方法。

现在我们创建一个模拟的数据列表，并根据用户在我们创建的输入框中提供的输入搜索数据。

import React from "react"; import ReactDOM from "react-dom";  const people = (   "Siri",   "Alexa",   "Google",   "Facebook",   "Twitter",   "Linkedin",   "Sinkedin" );  function App() {  const (searchTerm, setSearchTerm) = React.useState("");  const (searchResults, setSearchResults) = React.useState(());  const handleChange = event => {     setSearchTerm(event.target.value);   };    return (     <div className="App">       <input         type="text"         placeholder="Search"         value={searchTerm}         onChange={handleChange}       />       <ul>         <li>Item 1li>         <li>Item 2li>       ul>     div>   ); } 

在上面的代码片段中，我们创建了一个名为的模拟列表/数组 people，我们将从中显示我们组件中的列表。我们还创建了一个名为的州 searchResults 用于设置搜索结果。

现在我们将搜索功能应用于我们的组件。

import React from "react"; import ReactDOM from "react-dom";  const people = (   "Siri",   "Alexa",   "Google",   "Facebook",   "Twitter",   "Linkedin",   "Sinkedin" );  function App() {  const (searchTerm, setSearchTerm) = React.useState("");  const (searchResults, setSearchResults) = React.useState(());  const handleChange = event => {     setSearchTerm(event.target.value);   };  React.useEffect(() => {     const results = people.filter(person =>       person.toLowerCase().includes(searchTerm)     );     setSearchResults(results);   }, (searchTerm));    return (     <div className="App">       <input         type="text"         placeholder="Search"         value={searchTerm}         onChange={handleChange}       />       <ul>          {searchResults.map(item => (           <li>{item}li>         ))}       ul>     div>   ); } 

现在在上面的代码片段中， React.useEffect 使用hook，只要方法的依赖性发生变化就会执行。该 React.useEffect hook有两个参数。第一个参数是在依赖项中的数据被修改时执行的函数，第二个参数是依赖项的数组 React.useEffect 钩取决于。所以每当依赖的值在 React.useEffect hook在其第一个参数执行时更改函数。

所以在 React.useEffect 钩子上面，依赖是 searchTerm 在用户的每个输入上都会改变，而用户又在第一个参数中执行该功能 React.useEffect 钩。执行以下函数

() => {     const results = people.filter(person =>       person.toLowerCase().includes(searchTerm.toLowerCase())     );     setSearchResults(results);   }  

在上面的功能中， filter 方法适用于 people 数组，根据每次迭代返回的条件返回一个新数组。条件是 person.toLowerCase().includes(searchTerm.toLowerCase()) 这意味着如果 person 在人民名单中 includes 该 searchTerm 然后回来 true 否则返回 false。

在设置过滤后的列表后 searchResults 国家使用 setSearchResult 由…提供 React.useState 钩。

现在我们将搜索结果设置为状态，我们使用显示它 searchResults.map 在我们的组件中迭代所有的方法 searchResults 并将它们呈现在内部 ul。

  <ul>      {searchResults.map(item => (           <li>{item}li>      ))}   </ul> 

最终结果看起来像这样

您可以在此处找到完整的代码

谢谢。

你也可以在Twitter上关注我。