当前位置：首页 > React

react表单如何获得数据

2026-01-25 06:15:32React

获取表单数据的方法

在React中获取表单数据有多种方式，根据不同的场景和需求可以选择合适的方法。以下是几种常见的获取表单数据的方式：

受控组件方式

受控组件是React推荐的表单处理方式，表单元素的值由React的状态（state）控制，通过事件处理函数更新状态。

import React, { useState } from 'react';

function ControlledForm() {
  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(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直接访问DOM元素的值，适用于简单的表单或需要直接操作DOM的场景。

import React, { useRef } from 'react';

function UncontrolledForm() {
  const usernameRef = useRef();
  const passwordRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      username: usernameRef.current.value,
      password: passwordRef.current.value
    };
    console.log(formData); // 获取表单数据
  };

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

使用FormData API

通过FormData API可以方便地获取表单中的所有数据，适用于表单元素较多的情况。

import React from 'react';

function FormDataExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    console.log(data); // 获取表单数据
  };

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

使用第三方库

对于复杂的表单场景，可以使用第三方库如Formik或React Hook Form来简化表单处理。

React Hook Form示例：

react表单如何获得数据

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

function HookFormExample() {
  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">Submit</button>
    </form>
  );
}