React:每次使用其他输入时，具有多个输入的搜索表单都会提交单独的搜索

import React, { useState } from 'react';

function SearchForm() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // 在这里处理搜索逻辑
    console.log('Searching for:', searchTerm);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default SearchForm;

import React, { useState } from 'react';

function SearchForm() {
  const [inputs, setInputs] = useState({
    input1: '',
    input2: '',
    input3: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted with:', inputs);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="input1"
        value={inputs.input1}
        onChange={handleChange}
        key="input1"
      />
      <input
        type="text"
        name="input2"
        value={inputs.input2}
        onChange={handleChange}
        key="input2"
      />
      <input
        type="text"
        name="input3"
        value={inputs.input3}
        onChange={handleChange}
        key="input3"
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default SearchForm;