当前位置：首页 > React

react如何获取表单内容

2026-01-24 19:50:05React

获取表单内容的几种方法

受控组件方式
在React中推荐使用受控组件管理表单数据。通过onChange事件和value属性绑定表单元素与状态：

import { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData); // 获取到的表单数据
  };

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

非受控组件方式
通过useRef直接访问DOM元素获取值：

import { useRef } from 'react';

function Form() {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value); // 通过ref获取值
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} />
      <button type="submit">提交</button>
    </form>
  );
}

FormData API方式
适用于原生表单提交场景，可通过FormData对象获取所有表单字段：

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(Object.fromEntries(formData)); // 转换为普通对象
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <input name="phone" />
      <button type="submit">提交</button>
    </form>
  );
}

表单库方案

对于复杂表单场景，推荐使用表单库如Formik或React Hook Form。以React Hook Form为例：

import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data); // 自动收集的表单数据
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      <input {...register('password')} type="password" />
      <button type="submit">提交</button>
    </form>
  );
}