当前位置：首页 > React

react 实现表单

2026-01-26 11:33:20React

React 表单实现方法

受控组件方式 通过React的state管理表单数据，每个表单元素绑定value和onChange事件。表单数据完全由React组件控制，适用于需要实时验证或复杂交互的场景。

import { useState } from 'react';

function ControlledForm() {
  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">Submit</button>
    </form>
  );
}

非受控组件方式 使用ref直接访问DOM元素获取表单值，适合简单表单或需要集成非React代码的情况。

import { useRef } from 'react';

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

使用表单库 对于复杂表单场景，推荐使用Formik或React Hook Form等专业表单库。这些库提供验证、错误处理等开箱即用的功能。

React Hook Form示例：

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

function FormWithLibrary() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username', { required: true })} />
      {errors.username && <span>This field is required</span>}

      <input 
        type="password" 
        {...register('password', { 
          required: true,
          minLength: 6 
        })} 
      />
      {errors.password && <span>Password must be 6+ characters</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

表单验证实现 在受控组件中手动添加验证逻辑，或在表单库中使用内置验证规则。实时验证可提升用户体验。

const [errors, setErrors] = useState({});

const validate = () => {
  const newErrors = {};
  if (!formData.username) newErrors.username = 'Required';
  if (formData.password.length < 6) newErrors.password = 'Too short';
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (validate()) {
    console.log(formData);
  }
};

动态表单字段 使用数组state管理动态生成的表单字段，适用于需要添加/删除字段的场景。

const [fields, setFields] = useState([{ value: '' }]);

const addField = () => {
  setFields([...fields, { value: '' }]);
};

const removeField = (index) => {
  const newFields = [...fields];
  newFields.splice(index, 1);
  setFields(newFields);
};

react 实现表单