react如何获取表单的值

使用受控组件获取表单值

在React中，可以通过受控组件的方式获取表单值。这种方式将表单元素的值与React组件的state绑定，通过onChange事件更新state。

import React, { useState } from 'react';

function FormExample() {
  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">提交</button>
    </form>
  );
}

使用非受控组件获取表单值

对于不需要实时验证的表单，可以使用非受控组件通过ref获取表单值。这种方式在提交时一次性获取表单数据。

import React, { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('用户名:', usernameRef.current.value);
    console.log('密码:', passwordRef.current.value);
  };

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

使用FormData API获取表单值

HTML5的FormData API可以方便地获取表单中的所有字段值，适用于包含多种输入类型的复杂表单。

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 name="email" type="email" />
      <input name="age" type="number" />
      <button type="submit">提交</button>
    </form>
  );
}

使用第三方表单库

对于复杂的表单需求，可以考虑使用第三方库如Formik或React Hook Form。这些库提供了更强大的表单处理能力。

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('firstName')} />
      <input {...register('lastName')} />
      <button type="submit">提交</button>
    </form>
  );
}

每种方法适用于不同场景，受控组件适合需要实时验证的简单表单，非受控组件适合性能敏感场景，FormData API适合复杂表单，第三方库则提供最完整的解决方案。