在 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;