React JS 中的搜索栏！
嗨，大家好！
在本文中，我们将学习如何在 React JS 中创建一个功能齐全的搜索栏。我们将首先设置一些示例内容，然后使用创建的搜索栏实现搜索功能。
在我的博客上阅读这篇文章！
创建搜索栏
要创建搜索栏，我们首先要创建一个基本的文本字段。在本教程中，我们将使用 Material UI，这是一个优秀的 React UI 库，提供了各种组件。请按照以下步骤使用 npm 安装 Material UI：
npm install @mui/material
在 app.js 中，从 Material UI 导入文本字段组件。我们将使用文本字段的轮廓变体。
import { React, useState } from "react";
import TextField from "@mui/material/TextField";
import List from "./Components/List"
import "./App.css";
function App() {
return (
<div className="main">
<h1>React Search</h1>
<div className="search">
<TextField
id="outlined-basic"
variant="outlined"
fullWidth
label="Search"
/>
</div>
<List />
</div>
);
}
export default App;
你可能会注意到一些事情。我们正在导入一个名为 List.js 的文件，我们现在将创建它。它将包含我们的虚拟数据列表。
接下来，将以下 CSS 添加到您的 App.css：
.main {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
flex-direction: column;
row-gap: 20px;
}
h1 {
margin: 10px;
font-size: 40px;
color: rgb(1, 1, 59);
}
.search {
width: 30%;
}
ul li {
font-size: 20px;
}
创建虚拟内容
在src文件夹中创建一个名为Components的新文件夹。在其中创建两个文件，一个名为ListData.JSON的 JSON 文件和List.JS文件。
对于示例文本或内容，我使用了Mockaroo。您可以从这里获取各种真实的测试数据。对于此示例，您也可以使用我的 ListData.JSON：
[{
"id": 1,
"text": "Devpulse"
}, {
"id": 2,
"text": "Linklinks"
}, {
"id": 3,
"text": "Centizu"
}, {
"id": 4,
"text": "Dynabox"
}, {
"id": 5,
"text": "Avaveo"
}, {
"id": 6,
"text": "Demivee"
}, {
"id": 7,
"text": "Jayo"
}, {
"id": 8,
"text": "Blognation"
}, {
"id": 9,
"text": "Podcat"
}, {
"id": 10,
"text": "Layo"
}]
创建列表
现在我们将这些数据映射到 List 中。在 List.JS 文件中，添加以下代码：
import { React, useState } from 'react'
import data from "./ListData.json"
function List(props) {
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
)
}
export default List
您的页面现在看起来应该是这样的：
获取用户输入
现在我们需要将用户输入存储在一个状态中。我们将使用文本字段上的 onChange 事件处理程序和一个在用户每次输入时更新状态的函数来实现。
注意：创建搜索栏时，始终将输入文本转换为小写。
我们还将状态以 props 的形式传递给 List 组件。
你的 App.js 现在看起来如下：
import { React, useState } from "react";
import TextField from "@mui/material/TextField";
import List from "./Components/List";
import "./App.css";
function App() {
const [inputText, setInputText] = useState("");
let inputHandler = (e) => {
//convert input text to lower case
var lowerCase = e.target.value.toLowerCase();
setInputText(lowerCase);
};
return (
<div className="main">
<h1>React Search</h1>
<div className="search">
<TextField
id="outlined-basic"
onChange={inputHandler}
variant="outlined"
fullWidth
label="Search"
/>
</div>
<List input={inputText} />
</div>
);
}
export default App;
过滤数据
现在，我们将使用 filter 函数过滤数据，并创建一个名为 filteredData 的新数组。我们将用这个数组代替原始数组。
我们还将列表数据转换为小写，以匹配用户输入。用户输入可以通过 props 访问。
这将是你的 List.js：
import { React, useState } from 'react'
import data from "./ListData.json"
function List(props) {
//create a new array by filtering the original array
const filteredData = data.filter((el) => {
//if no input the return the original
if (props.input === '') {
return el;
}
//return the item which contains the user input
else {
return el.text.toLowerCase().includes(props.input)
}
})
return (
<ul>
{filteredData.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
)
}
export default List
结果
您的功能搜索栏将如下所示：
您已完成！
代码也在我的 GitHub 上。
链接
感谢大家阅读这篇文章！也
欢迎访问我的博客！