加上input输入框搜索

好的，我们可以在原有的Table组件中添加一个input输入框，用于实现搜索功能。具体实现步骤如下：

1. 在Table组件中，添加一个input元素，用于接收用户输入的搜索关键字。

2. 使用useState钩子，定义一个searchKeyword状态，用于存储用户输入的搜索关键字。

3. 在handleSearch函数中，更新searchKeyword状态。

4. 使用filter函数，根据搜索关键字过滤数据。

下面是修改后的代码：

import React, { useState } from 'react';

const data = [
  { name: 'John', age: 25, gender: 'Male' },
  { name: 'Jane', age: 30, gender: 'Female' },
  { name: 'Bob', age: 40, gender: 'Male' },
  { name: 'Alice', age: 35, gender: 'Female' },
];

const Table = ({ data }) => {
  const [genderFilter, setGenderFilter] = useState('All');
  const [searchKeyword, setSearchKeyword] = useState('');
  
  const handleGenderFilter = (e) => {
    setGenderFilter(e.target.value);
  };
  
  const handleSearch = (e) => {
    setSearchKeyword(e.target.value);
  };
  
  const filteredData = data.filter(item => {
    if (genderFilter !== 'All' && item.gender !== genderFilter) {
      return false;
    }
    if (searchKeyword && !item.name.toLowerCase().includes(searchKeyword.toLowerCase())) {
      return false;
    }
    return true;
  });
  
  return (
    <div>
      <label>
        Filter by gender:
        <select value={genderFilter} onChange={handleGenderFilter}>
          <option value="All">All</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </label>
      <br />
      <label>
        Search by name:
        <input type="text" value={searchKeyword} onChange={handleSearch} />
      </label>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.gender}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Table data={data} />
    </div>
  );
};

export default App;

在这个例子中，我们添加了一个输入框，用于接收用户输入的搜索关键字。我们使用useState钩子定义了一个searchKeyword状态，用于存储用户输入的搜索关键字。在handleSearch函数中，我们更新了searchKeyword状态。在数据过滤中，我们根据genderFilter和searchKeyword对数据进行了过滤。如果genderFilter不是'All'，并且item.gender与genderFilter不相等，则返回false。如果searchKeyword存在，并且item.name中不包含searchKeyword，则返回false。最后，我们在返回值中添加了一个标签，用于显示搜索输入框。