当前位置：首页 > React

react两个表单如何单独提交

2026-01-26 05:46:42React

实现 React 中两个表单单独提交的方法

方法一：使用独立的状态和提交函数

为每个表单分别定义独立的状态和提交处理函数，确保表单之间互不干扰。

function DualForm() {
  const [form1Data, setForm1Data] = useState({});
  const [form2Data, setForm2Data] = useState({});

  const handleSubmit1 = (e) => {
    e.preventDefault();
    console.log('Form 1 submitted:', form1Data);
    // 提交表单1的逻辑
  };

  const handleSubmit2 = (e) => {
    e.preventDefault();
    console.log('Form 2 submitted:', form2Data);
    // 提交表单2的逻辑
  };

  return (
    <div>
      <form onSubmit={handleSubmit1}>
        <input 
          name="field1" 
          onChange={(e) => setForm1Data({...form1Data, [e.target.name]: e.target.value})}
        />
        <button type="submit">Submit Form 1</button>
      </form>

      <form onSubmit={handleSubmit2}>
        <input 
          name="field2" 
          onChange={(e) => setForm2Data({...form2Data, [e.target.name]: e.target.value})}
        />
        <button type="submit">Submit Form 2</button>
      </form>
    </div>
  );
}

方法二：使用 useRef 管理表单数据

通过 useRef 直接访问表单元素，避免状态管理，适合简单场景。

function RefForm() {
  const form1Ref = useRef();
  const form2Ref = useRef();

  const handleSubmit1 = (e) => {
    e.preventDefault();
    const data = new FormData(form1Ref.current);
    console.log('Form 1 data:', Object.fromEntries(data));
  };

  const handleSubmit2 = (e) => {
    e.preventDefault();
    const data = new FormData(form2Ref.current);
    console.log('Form 2 data:', Object.fromEntries(data));
  };

  return (
    <div>
      <form ref={form1Ref} onSubmit={handleSubmit1}>
        <input name="field1" />
        <button type="submit">Submit Form 1</button>
      </form>

      <form ref={form2Ref} onSubmit={handleSubmit2}>
        <input name="field2" />
        <button type="submit">Submit Form 2</button>
      </form>
    </div>
  );
}

方法三：使用表单库实现隔离

利用如 Formik 等表单库，为每个表单创建独立实例，获得更完善的功能隔离。

import { Formik, Form, Field } from 'formik';

function FormikForms() {
  return (
    <div>
      <Formik
        initialValues={{ field1: '' }}
        onSubmit={(values) => console.log('Form 1:', values)}
      >
        <Form>
          <Field name="field1" />
          <button type="submit">Submit Form 1</button>
        </Form>
      </Formik>

      <Formik
        initialValues={{ field2: '' }}
        onSubmit={(values) => console.log('Form 2:', values)}
      >
        <Form>
          <Field name="field2" />
          <button type="submit">Submit Form 2</button>
        </Form>
      </Formik>
    </div>
  );
}