当前位置：首页 > React

react如何获取表单内容

2026-03-11 04:35:27React

获取表单内容的方法

在React中获取表单内容可以通过多种方式实现，具体取决于表单的设计和需求。以下是几种常见的方法：

使用受控组件

受控组件通过React的状态管理表单元素的值。每个表单元素都与一个状态变量绑定，并通过事件处理函数更新状态。

import React, { useState } from 'react';

function Form() {
  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 data:', 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直接获取表单元素的值，通常使用useRef钩子实现。

import React, { useRef } from 'react';

function Form() {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Username:', usernameRef.current.value);
    console.log('Password:', passwordRef.current.value);
  };

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

使用FormData API

通过FormData对象可以直接从表单元素中提取数据，无需手动绑定每个字段。

import React from 'react';

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    console.log('Form data:', 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如何获取表单内容

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

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

  const onSubmit = (data) => {
    console.log('Form data:', data);
  };

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