创建自定义挂钩以在React中提交表单

import React, { useState } from 'react';

const useForm = (initialState, callback) => {
  const [values, setValues] = useState(initialState);

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
    callback();
  };

  const handleChange = (event) => {
    event.persist();
    setValues((prevValues) => ({
      ...prevValues,
      [event.target.name]: event.target.value,
    }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
  };
};

const MyForm = () => {
  const { values, handleChange, handleSubmit } = useForm(
    { name: '', email: '' },
    submitForm
  );

  const submitForm = () => {
    // 在这里处理表单提交逻辑
    console.log(values);
  };

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