react如何获取表单

获取表单数据的方法

在React中获取表单数据有多种方式，取决于使用的是受控组件还是非受控组件。

受控组件方式

通过React的状态管理来获取表单数据，每个表单元素都绑定一个状态值，并通过onChange事件更新状态。

import { 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(formData); // 获取表单数据
  };

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

非受控组件方式

使用useRef直接访问DOM元素获取表单数据，适合简单表单或需要直接操作DOM的场景。

import { useRef } from 'react';

function Form() {
  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 ref={usernameRef} name="username" />
      <input ref={passwordRef} name="password" />
      <button type="submit">Submit</button>
    </form>
  );
}

使用FormData API

通过FormData对象直接获取表单数据，适用于需要快速获取所有表单字段的场景。

function Form() {
  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="username" />
      <input name="password" />
      <button type="submit">Submit</button>
    </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')} />
      <button type="submit">Submit</button>
    </form>
  );
}