react 多条件查询

在 React 中进行多条件查询可以通过使用状态管理来实现。以下是一个简单的示例，演示如何在 React 中实现多条件查询：

首先，创建一个状态管理组件，用于存储查询条件和处理查询逻辑：

import React, { useState } from 'react';

const QueryComponent = ({ onQuery }) => {
  const [condition1, setCondition1] = useState('');
  const [condition2, setCondition2] = useState('');
  const [condition3, setCondition3] = useState('');

  const handleQuery = () => {
    // 在这里执行查询逻辑，并将条件传递给父组件
    onQuery({ condition1, condition2, condition3 });
  };

  return (
    <div>
      <input value={condition1} onChange={e => setCondition1(e.target.value)} />
      <input value={condition2} onChange={e => setCondition2(e.target.value)} />
      <input value={condition3} onChange={e => setCondition3(e.target.value)} />
      <button onClick={handleQuery}>查询</button>
    </div>
  );
};

export default QueryComponent;

然后，在父组件中使用该 QueryComponent 并处理查询结果：

import React, { useState } from 'react';
import QueryComponent from './QueryComponent';

const ParentComponent = () => {
  const [queryResult, setQueryResult] = useState([]);

  const handleQuery = (conditions) => {
    // 在这里执行实际的查询操作，可以根据条件筛选数据
    // 假设这里是一个异步操作，返回的结果是一个数组
    const results = performQuery(conditions);

    setQueryResult(results);
  };

  return (
    <div>
      <QueryComponent onQuery={handleQuery} />

      {/* 展示查询结果 */}
      <ul>
        {queryResult.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ParentComponent;

在上述示例中，QueryComponent 组件包含了多个条件的输入框，并通过 useState 钩子来保存条件的状态。当用户点击查询按钮时，QueryComponent 组件会将条件传递给父组件的 handleQuery 函数。父组件根据接收到的条件执行实际的查询操作，并将查询结果保存在其状态中，然后再渲染出来。

当然，这只是一个简单的示例，你可以根据实际需求来扩展和修改代码。希望对你有所帮助！