在React中过滤屏幕上显示的数组项目通常涉及到状态管理和条件渲染。以下是一个基本的示例,展示了如何根据用户输入过滤数组并在屏幕上显示过滤后的结果。
import React, { useState } from 'react';
const App = () => {
const [items, setItems] = useState([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
// ...更多项
]);
const [filterText, setFilterText] = useState('');
const handleFilterChange = (event) => {
setFilterText(event.target.value);
};
const filteredItems = items.filter(item =>
item.name.toLowerCase().includes(filterText.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Filter items"
value={filterText}
onChange={handleFilterChange}
/>
<ul>
{filteredItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};
export default App;
useState
钩子来管理数组和过滤文本的状态。handleFilterChange
来更新过滤文本的状态。filter
方法根据过滤文本过滤数组项。map
方法渲染过滤后的数组项。通过这种方式,你可以实现一个简单的过滤功能,根据用户的输入动态地显示数组中的项目。
领取专属 10元无门槛券
手把手带您无忧上云