当前位置：首页 > React

react如何提交指定表单

2026-01-24 19:34:19React

提交指定表单的方法

在 React 中提交指定表单通常涉及表单元素的管理、事件处理和状态控制。以下是几种常见的方法：

使用受控组件

通过将表单元素的值绑定到 React 的状态，可以完全控制表单的提交行为。

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    // 提交逻辑
  };

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

使用非受控组件和 ref

如果不想管理每个表单元素的状态，可以通过 ref 直接访问 DOM 元素的值。

import React, { useRef } from 'react';

function MyForm() {
  const formRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(formRef.current);
    console.log('Form submitted:', Object.fromEntries(formData));
    // 提交逻辑
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  );
}

使用 Formik 库

Formik 是一个流行的表单管理库，简化了表单处理逻辑。

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

function MyForm() {
  return (
    <Formik
      initialValues={{ username: '', password: '' }}
      onSubmit={(values) => {
        console.log('Form submitted:', values);
        // 提交逻辑
      }}
    >
      <Form>
        <Field type="text" name="username" />
        <Field type="password" name="password" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

动态提交指定表单

如果页面有多个表单，可以通过 id 或 ref 指定提交某个表单。

import React, { useRef } from 'react';

function MultiForm() {
  const form1Ref = useRef(null);
  const form2Ref = useRef(null);

  const submitForm = (formRef) => {
    const formData = new FormData(formRef.current);
    console.log('Form submitted:', Object.fromEntries(formData));
    // 提交逻辑
  };

  return (
    <div>
      <form ref={form1Ref}>
        <input type="text" name="field1" />
        <button type="button" onClick={() => submitForm(form1Ref)}>
          Submit Form 1
        </button>
      </form>
      <form ref={form2Ref}>
        <input type="text" name="field2" />
        <button type="button" onClick={() => submitForm(form2Ref)}>
          Submit Form 2
        </button>
      </form>
    </div>
  );
}