使用钩子🔎在 REACT 中创建简单的搜索表单。

设置项目

搜索是 Web 应用程序最重要的组件之一。让我们以一个电商平台为例，该平台上有成千上万种商品在售，但要找到所需的特定商品，您需要使用平台提供的搜索组件进行搜索。

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

设置项目

要设置你的项目，你可以使用其中一种create-react-app，也可以前往CodeSandBox。你可以在这里
找到一篇关于设置 React 项目的文章。

创建项目后，首先，让我们制作一个简单的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 1</li>
        <li>Item 2</li>
      </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 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

现在，我们创建了一个名为的状态searchTerm，该状态会在每次事件发生时保存来自搜索输入的数据change。该handleChange方法以对象作为参数，并使用方法提供的方法event将表单的当前值设置为searchTerm状态。setSearchTermReact.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 1</li>
        <li>Item 2</li>
      </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我们使用了钩子函数，每当方法的依赖项发生变化时，它就会执行。React.useEffect钩子函数接受两个参数。第一个参数是当依赖项中的数据被修改时要执行的函数；第二个参数是React.useEffect钩子函数所依赖的依赖项数组。因此，每当钩子函数中依赖项的值React.useEffect发生变化时，它的第一个参数中的函数就会执行。

因此，在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上关注我。

文章来源：https://dev.to/asimdahall/simple-search-form-in-react-using-hooks-42pg

使用 Hooks 🔎 在 REACT 中创建简单的搜索表单。设置项目

使用钩子🔎在 REACT 中创建简单的搜索表单。

设置项目

设置项目