如何在 React 中添加搜索栏

这篇文章将涵盖以下内容：

在 React 中添加搜索栏的简单步骤
我们将使用它useState来管理input文本字段
过滤方法：filter和includes

例子：

步骤 1：添加输入标签

input在组件的渲染区域添加一个标签。属性type应设置为文本。
现在为了设置它value并添加一个onChange处理输入值（在本例中为搜索）的函数，我们需要使用useState
每次更改时都会onChange={(e) => setSearch(e.target.value)}设置搜索
现在我们的输入值由我们的状态管理！
接下来我们将看到如何过滤contacts数组

export default function Search() {
    const [search, setSearch] = useState('')

    return (
        <div>
            <h3 className="title">CONTACTS LIST</h3>
                <input 
                    type="text" 
                    placeholder="Search name" 
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    />
            //a contacts array passed down to List 
            <List contacts={contacts/>
        </div>
    )

`List.js`成分

export default function List({contacts}) {
    return (
        <div>  
            <ul>
            {contacts.map(contact => (
                <li key={contact.id}>
                    Name:
                       <span>{contact.full_name}</span>
                    Phone: 
                       <span>{contact.tel}</span>
                </li>   
            ))}
            </ul>
        </div>
    )
}

第 2 步：添加搜索功能！

这就是我们要做的事情filteredContacts：

如果我们尚未搜索任何内容，请仅显示联系人列表
如果没有，请过滤联系人数组并检查每个联系人的全名是否包含在我们要查找的搜索字段中
而且，如果我们输入小写字母，请不要太介意并仍然向我们显示结果:)

const filteredContacts = search.length === 0 ? contacts
: contacts.filter(contact =>                         
 contact.full_name.toLowerCase().includes(search.toLowerCase()))

步骤 3：渲染和最终代码

为了呈现我们正在寻找的联系人，我们现在将其传递filteredContacts给List组件（见下文）
Search这是该组件的完整代码

注意：对于虚假数据，我使用Mockaroo API 以及axios内部useEffect。

import React, {useState, useEffect} from 'react';
import axios from 'axios'; 
import List from './List'; 

export default function Search() {
    const [contacts, setContacts] = useState([])
    const [search, setSearch] = useState('')

    useEffect(() => {
        const API_URL = 'https://my.api.mockaroo.com/phonebook.json?key=9ac1c5f0'
        axios
            .get(API_URL)
            .then(res => {
                const contacts = res.data
                setContacts(contacts)
            })
    }, [])

    const filteredContacts = search.length === 0 ? contacts : 
    contacts.filter(contact => contact.full_name.
                toLowerCase().includes(search.toLowerCase()))

    return (
        <div>
            <h3>CONTACTS LIST</h3>
                <input 
                    type="text" 
                    placeholder="Search name" 
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    />
            <List contacts={filteredContacts}/>
        </div>
    )
}

希望它有用！

注意：我的帖子受到我在The Collab Lab学习到的知识的启发☺️

鏂囩珷鏉ユ簮锛�https://dev.to/deboragaleano/how-to-add-a-search-bar-in-react-noc

如何在 React 中添加搜索栏

如何在 React 中添加搜索栏

例子：

步骤 1：添加输入标签

List.js成分

第 2 步：添加搜索功能！

步骤 3：渲染和最终代码

`List.js`成分