如何在React中过滤屏幕上显示的数组项目？

在React中过滤屏幕上显示的数组项目通常涉及到状态管理和条件渲染。以下是一个基本的示例，展示了如何根据用户输入过滤数组并在屏幕上显示过滤后的结果。

基础概念

状态管理：在React中，状态（state）是组件内部的数据存储，当状态改变时，组件会重新渲染。
条件渲染：根据某些条件决定是否渲染某些组件或元素。

类型

基于文本的过滤：根据用户输入的文本过滤数组项。
基于属性的过滤：根据对象的特定属性过滤数组项。

应用场景

搜索功能：在搜索框中输入关键词，实时显示匹配的结果。
数据筛选：在数据列表中根据特定条件筛选显示的数据。

示例代码

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;