当前位置：首页 > React

react如何获取表单

2026-02-12 08:06:42React

获取表单数据的常见方法

在React中获取表单数据可以通过多种方式实现，具体选择取决于项目需求和技术栈。以下是几种主流方法：

受控组件方式
通过React的state管理表单数据，每个表单元素绑定value和onChange事件：

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元素获取值：

react如何获取表单

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

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

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" ref={usernameRef} />
      <input name="password" type="password" ref={passwordRef} />
      <button type="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" type="password" />
      <button type="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")} type="password" />
      <button type="submit">提交</button>
    </form>
  );
}