当前位置：首页 > React

react如何设计表单

2026-02-26 10:59:22React

React 表单设计方法

受控组件方式
表单元素（如 input、textarea、select）的值由 React 的 state 控制，通过 onChange 事件同步更新状态。

import { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

非受控组件方式
通过 ref 直接访问 DOM 元素的值，适用于需要手动管理表单数据的场景。

import { useRef } from 'react';

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

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

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

动态表单字段
通过 state 管理多个字段，动态增减表单元素。

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

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

  const handleChange = (index, e) => {
    const newFields = [...fields];
    newFields[index].value = e.target.value;
    setFields(newFields);
  };

  return (
    <form>
      {fields.map((field, index) => (
        <input
          key={index}
          type="text"
          value={field.value}
          onChange={(e) => handleChange(index, e)}
        />
      ))}
      <button type="button" onClick={addField}>Add Field</button>
    </form>
  );
}

表单验证
在提交或输入时验证数据，结合 state 和条件渲染提示错误信息。

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const validateEmail = (value) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!regex.test(value)) {
      setError('Invalid email format');
    } else {
      setError('');
    }
  };

  return (
    <form>
      <input
        type="email"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
          validateEmail(e.target.value);
        }}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

第三方库集成
使用如 Formik 或 React Hook Form 简化表单逻辑。

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input 
        {...register('username', { required: true })} 
        placeholder="Username" 
      />
      {errors.username && <span>Username is required</span>}
      <button type="submit">Submit</button>
    </form>
  );
}