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>
)
}
-
useState
:通过useState
hook 来定义了两个状态变量list
和key
,并使用setList
和setKey
来更新它们的值。list
用于存储一组初始的数据列表,key
用于存储搜索关键字。 -
useRef
:使用useRef
hook 创建了一个名为keyRef
的引用,它被绑定到了输入框上,可以用来获取输入框的值。 -
handleClick
函数:当点击搜索按钮时,会调用handleClick
函数,这个函数会将输入框中的值更新到key
状态中。 -
useMemo
:使用useMemo
hook 来创建了一个名为slice
的变量,它用于根据输入的关键字来过滤原始的列表数据。如果关键字未定义(即key === undefined
),则直接返回原始列表;否则使用filter
方法来筛选出符合条件的列表项。 -
JSX 部分:在 JSX 中,渲染了一个输入框和一个按钮,用于输入搜索关键字和触发搜索操作。另外,根据经过筛选后的列表项,渲染了一个无序列表,展示搜索结果。
需要注意的是,match
方法返回的是一个数组,包含了所有匹配的结果,如果没有匹配到,则返回 null
。在条件判断时需要格外小心处理返回值。