Javascript 实时搜索栏：如何更新显示在与输入不同的组件中的数据

发布于05月09日

我正在try 使用Next.js实现一个实时搜索栏.我能够处理输入更改，但似乎无法根据输入过滤结果.

Layout.jsx:

import './globals.css';
import SearchBar from './SearchBar';

export const metadata = {
  title: 'My App',
  description: 'Generated by create next app',
}


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className='text-center bg-sky-800'>
        <h1 className='text-4xl mt-4 text-white'>My App</h1>
        <SearchBar />
        {children}
      </body>
    </html>
  )
}

搜索栏组件:

'use client'
import { useState } from "react"


export default function SearchBar() {
    const [searchInput, setSearchInput] = useState('');
    
    function handleChange(e) {
        setSearchInput(e.target.value);
    }

    return (
        <input 
        className="p-3 border rounded bg-blue-100"
        type="search" 
        placeholder="Search Robots"
        onChange={handleChange}
        />
    )
}

保存我要筛选的项目的代码的组件(它们是卡片):

import Card from './Card'
import { robots } from './robots'

export default function RobotList() {
  return (
    <main>
      {robots.map(robot => {
          return (
            <Card key={robot.id} id={robot.id} name={robot.name} email={robot.email} />
          )
        })
      }
    </main>
  )
}

Page.jsx :

import RobotList from './RobotList'

export default function Home() {
  return (
    <main>
        <RobotList />
    </main>
  )
}

卡组件:

export default function Card({ id, name, email }) {
    return (
        <div className="text-center bg-green-300 p-3 rounded inline-block m-2 hover:scale-105 transition ease-in duration-300 drop-shadow-xl">
            <img src={`https://robohash.org/${id}?200x200`} alt="robot" />
            <div>
                <h2>{name}</h2>
                <p>{email}</p>
            </div>
        </div>
    )
}

我使用的是Next.js v13.任何帮助都将不胜感激.谢谢:)

// RobotsContextProvider.js "use client"; // Make sure this is the correct path import { robots } from "./robots"; import { useState, createContext, useContext } from "react"; const RobotsContext = createContext(); export function useRobotsContext() { return useContext(RobotsContext); } export default function RobotsContextProvider({ children }) { const [searchInput, setSearchInput] = useState(""); function handleChange(e) { setSearchInput(e.target.value); } return ( <RobotsContext.Provider value={{ robots: searchInput ? robots.filter((r) => r.name.includes(searchInput)) : robots }} > <input className="p-3 border rounded bg-blue-100" type="search" placeholder="Search Robots" onChange={handleChange} /> {children} </RobotsContext.Provider> ); }

import "./globals.css"; import RobotsContextProvider from "./RobotsContextProvider"; export const metadata = { title: "My App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( <html lang="en"> <body className="text-center bg-sky-800"> <h1 className="text-4xl mt-4 text-white">My App</h1> <RobotsContextProvider>{children}</RobotsContextProvider> </body> </html> ); }

"use client"; import Card from "./Card"; // Make sure this is the correct path import { useRobotsContext } from "./RobotsContextProvider"; export default function RobotList() { const { robots } = useRobotsContext(); return ( <main> {robots.map((robot) => { return <Card key={robot.id} id={robot.id} name={robot.name} email={robot.email} />; })} </main> ); }

Javascript 实时搜索栏：如何更新显示在与输入不同的组件中的数据

推荐答案

Javascript相关问答推荐

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性？

Redux查询多个数据库Api reducerPath&

Rehype将hashtag呈现为URL

在观察框架中搜索CSV数据

在带有背景图像和圆形的div中添加长方体阴影时的重影线

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

制作钢琴模拟器，并且在控制台中不会执行或显示该脚本

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存？

Reaction Native中的范围滑块

在HTML语言中调用外部JavaScript文件中的函数

TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

在Matter.js中添加从点A到另一个约束的约束

环境值在.js文件/Next.js中不起作用

令牌JWT未过期

JS Animate()方法未按预期工作

匹配一个或多个可选重复的特定模式

如何在尚未创建的鼠标悬停事件上访问和着色div？

为什么我的Navbar.css没有显示在本地主机页面上？

将Windows XP转换为原始数据以在html前端中显示

当一条路由在Reaction路由中命中时，如何有条件地渲染两个组件或更改两个插座？