当前位置：首页 > React

react如何获取表单内的值

2026-01-25 23:25:15React

受控组件方式

在React中，通过受控组件获取表单值是最推荐的方式。将表单元素的值与React组件的state绑定，通过onChange事件更新state。

import { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted value:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

非受控组件方式

使用useRef钩子直接访问DOM元素获取值。这种方式适用于需要快速集成非React代码或第三方库的场景。

import { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted value:', inputRef.current.value);
  };

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

多字段表单处理

对于包含多个输入字段的表单，可以采用以下两种方式管理状态。

方式一：为每个字段创建独立state

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

// 每个字段单独处理
<input 
  type="text" 
  value={username} 
  onChange={(e) => setUsername(e.target.value)} 
/>

方式二：使用单个对象state

const [formData, setFormData] = useState({
  username: '',
  password: ''
});

// 统一处理所有字段
const handleChange = (e) => {
  setFormData({
    ...formData,
    [e.target.name]: e.target.value
  });
};

<input 
  type="text" 
  name="username" 
  value={formData.username} 
  onChange={handleChange} 
/>

表单库方案

对于复杂表单场景，可以考虑使用专业表单库如Formik或React Hook 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">Submit</button>
    </form>
  );
}

react如何获取表单内的值