react多条件搜索怎么做

React实现多条件搜索可以通过以下步骤：

1. 定义多个搜索条件的状态：使用useState() Hook或class组件的state来定义多个搜索条件的状态。

2. 监听输入框的变化：使用onChange事件监听输入框的变化，并将输入框的值存储在对应的搜索条件状态中。

3. 根据多个条件过滤数据：使用filter()方法结合多个搜索条件进行数据过滤，将过滤后的数据渲染到页面上。

4. 可选的优化：可以使用useMemo() Hook或类似的技术来避免每次渲染都进行数据过滤。

下面是一个简单的示例代码，演示如何使用React实现多条件搜索：

import React, { useState } from 'react';

const data = [
  { name: 'Alice', age: 20, gender: 'female' },
  { name: 'Bob', age: 25, gender: 'male' },
  { name: 'Charlie', age: 30, gender: 'male' },
  { name: 'David', age: 35, gender: 'male' },
  { name: 'Eva', age: 40, gender: 'female' },
];

function App() {
  const [name, setName] = useState('');
  const [minAge, setMinAge] = useState('');
  const [maxAge, setMaxAge] = useState('');
  const [gender, setGender] = useState('');

  const filteredData = data.filter((item) => {
    return (
      item.name.includes(name) &&
      item.age >= minAge &&
      item.age <= maxAge &&
      (gender === '' || item.gender === gender)
    );
  });

  return (
    <>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label>Age:</label>
        <input type="number" value={minAge} onChange={(e) => setMinAge(e.target.value)} />
        <span>~</span>
        <input type="number" value={maxAge} onChange={(e) => setMaxAge(e.target.value)} />
      </div>
      <div>
        <label>Gender:</label>
        <select value={gender} onChange={(e) => setGender(e.target.value)}>
          <option value="">All</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </div>
      <ul>
        {filteredData.map((item) => (
          <li key={item.name}>
            {item.name}, {item.age}, {item.gender}
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;

在这个示例代码中，我们定义了四个搜索条件的状态：name、minAge、maxAge和gender。通过onChange事件监听输入框的变化，并将变化后的值存储在对应的搜索条件状态中。然后，使用filter()方法根据多个条件过滤数据，并将过滤后的数据渲染到页面上。