ReactJS 中的实时搜索

大家好，今天我将向大家展示如何在 React 中实时搜索元素，无需点击按钮。搜索将是实时的，当你输入一个单词时，所有包含该单词的元素都会被过滤并显示出来。

我已经为该代码使用了示例数据，您也可以将您的数据用于该代码。

数据 -

const Data = [

        {
          "id": "61050f211ab57ba6cd86b1e8",
          "name": "Valeria Ramos"
        },
        {
          "id": "61050f21aa707624a853421b",
          "name": "Campos Daniels"
        },
        {
          "id": "61050f21ec0c4d434eedda85",
          "name": "Kate Gilbert"
        },
        {
          "id": "61050f21a4543be9235f4643",
          "name": "Hunt Lynch"
        },
        .
        .
        .
        .
        .
    ];

搜索代码 -

import React,{useState} from 'react'
import Data from './SampleData'
import './App.css';

function App() {

    const [list, setList] = useState("");


    return (
        <div className="text-center my-5">
            <input 
            type="text"
            placeholder="search..."
            onChange={(event) => {
                setList(event.target.value);
            }}
            />

            <div  className="main">
                {Data.filter((item) => {
                    if(list === ""){
                        return item;
                    }
                    else if(item.name.toLowerCase()
                            .includes(list.toLowerCase())){
                        return item
                    }

                }).map((item) => (
                    <div key={item.id}><p className="items"> 
                      {item.name}
                    </p></div>
                ))
                }
            </div>
        </div>
    )

}

export default App;

在职的 -

首先，我们使用 useState 为输入元素创建一个状态。
然后我们使用输入标签创建一个输入元素，并在其中我们有 onChange 事件，在 onChange 中我们将列表的状态更改为与输入字段中输入的单词匹配。
然后我们使用 Filter 方法过滤数据。4.if(list===""){ return item;}，表示如果输入字段为空，则返回整个数据。
else if(item.name.toLowerCase().includes(list.toLowerCase())){ return item } 它首先使用 toLowerCase() 方法将名称转换为小写，然后使用 included() 方法检查输入的单词是否包含在数据集中，并且使用 toLowerCase() 方法将输入的单词转换为小写，因为名称也是小写格式。
然后过滤数据后，我们使用 map() 方法映射数据

CSS -

p{
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: crimson;
  display: flex;
  justify-content: center;
  align-items: center;
  color: antiquewhite;
}
.main{
  margin: 5rem;
  display: grid;
grid-template-columns: repeat(4,1fr);
justify-content: center;
text-align: center;
}

输出 -

搜索之前

搜索后

希望您理解这个过程，如果有任何错误，请在评论区指出。这也有助于我了解自己的错误，以便及时改正。

感谢您阅读这篇文章

鏂囩珷鏉ユ簮锛�https://dev.to/shubhamtiwari909/real-time-searching-in-reactjs-3mfm