React前端搜索（基础简单）

import React, { useState ,useRef,useMemo} from 'react'

export default function Home() {
  const [list, setList] = useState([
    { id: 1, title: '静静的巨人' },
    { id: 2, title: '我校白小飞' },
    { id: 3, title: '尸兄' },
    { id: 4, title: '京东' },
    { id: 5, title: '破壁去' },
  ])
  const [key, setKey] = useState()
  const keyRef = useRef('')

  const handleClick = () => {
    setKey(keyRef.current.value)
  }
 
    const slice = useMemo(() => key === undefined ? list : list.filter(item => item.title.match(key) != null))
  return (
    <div>
      <input
        type="text"
        ref={keyRef}
      />

      <button onClick={() => handleClick()}>搜索</button>
      <ul>
        {slice.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  )
}

1. useState：通过 useState hook 来定义了两个状态变量 list 和 key，并使用 setList 和 setKey 来更新它们的值。list 用于存储一组初始的数据列表，key 用于存储搜索关键字。

2. useRef：使用 useRef hook 创建了一个名为 keyRef 的引用，它被绑定到了输入框上，可以用来获取输入框的值。

3. handleClick 函数：当点击搜索按钮时，会调用 handleClick 函数，这个函数会将输入框中的值更新到 key 状态中。

4. useMemo：使用 useMemo hook 来创建了一个名为 slice 的变量，它用于根据输入的关键字来过滤原始的列表数据。如果关键字未定义（即 key === undefined），则直接返回原始列表；否则使用 filter 方法来筛选出符合条件的列表项。

5. JSX 部分：在 JSX 中，渲染了一个输入框和一个按钮，用于输入搜索关键字和触发搜索操作。另外，根据经过筛选后的列表项，渲染了一个无序列表，展示搜索结果。

需要注意的是，match 方法返回的是一个数组，包含了所有匹配的结果，如果没有匹配到，则返回 null。在条件判断时需要格外小心处理返回值。