在表单提交上调用React自定义挂钩

import { useState } from 'react';

const useFormSubmit = (initialState, onSubmit) => {
  const [formData, setFormData] = useState(initialState);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return {
    formData,
    handleChange,
    handleSubmit,
  };
};

// 在组件中使用自定义挂钩
const MyForm = () => {
  const { formData, handleChange, handleSubmit } = useFormSubmit(
    { name: '', email: '' },
    (data) => {
      // 处理表单提交的逻辑
      console.log('Form data:', data);
    }
  );

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};