在React中创建多个搜索条件

import React, { useState, useEffect } from 'react';

// 搜索条件组件
function SearchCondition({ label, value, onChange }) {
  return (
    <div>
      <label>{label}:</label>
      <input type="text" value={value} onChange={onChange} />
    </div>
  );
}

// 父组件
function SearchForm() {
  const [condition1, setCondition1] = useState('');
  const [condition2, setCondition2] = useState('');

  useEffect(() => {
    // 当搜索条件变化时执行搜索操作
    search();
  }, [condition1, condition2]);

  const handleCondition1Change = (e) => {
    setCondition1(e.target.value);
  };

  const handleCondition2Change = (e) => {
    setCondition2(e.target.value);
  };

  const search = () => {
    // 执行搜索操作，可以在这里发送搜索请求或更新搜索结果
    console.log('Searching with condition 1:', condition1);
    console.log('Searching with condition 2:', condition2);
  };

  return (
    <div>
      <SearchCondition label="Condition 1" value={condition1} onChange={handleCondition1Change} />
      <SearchCondition label="Condition 2" value={condition2} onChange={handleCondition2Change} />
      <button onClick={search}>Search</button>
    </div>
  );
}

export default SearchForm;