当前位置：首页 > React

react如何设计表单

2026-03-31 04:13:23React

React 表单设计方法

受控组件方式
表单元素的值由 React 的 state 控制，通过 onChange 事件同步状态。这种方式适合需要实时验证或复杂交互的表单。

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

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

  return <input value={value} onChange={handleChange} />;
}

非受控组件方式
通过 useRef 直接访问 DOM 元素获取表单值，适合简单表单或需要集成第三方库的情况。

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

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

表单验证处理
结合状态管理实现实时验证，或在提交时统一校验。可使用 Yup 或 Joi 等库进行 schema 验证。

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

const validate = () => {
  const newErrors = {};
  if (!value) newErrors.value = 'Required';
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

复杂表单管理
对于多字段表单，推荐使用 Formik 或 React Hook Form 等库。这些库提供字段管理、验证和提交的完整解决方案。

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

function ComplexForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <button type="submit">Submit</button>
    </form>
  );
}

表单性能优化
对于大型表单，避免全量渲染。使用 React.memo 优化子组件，或分步骤加载表单字段。动态表单字段可采用 key 控制局部更新。

const MemoizedInput = React.memo(({ value, onChange }) => (
  <input value={value} onChange={onChange} />
));

无障碍访问
确保表单包含 <label> 关联，使用 aria-* 属性增强可访问性。错误消息应通过 aria-live 区域提示屏幕阅读器用户。

react如何设计表单

<label htmlFor="email">Email</label>
<input id="email" aria-invalid={!!errors.email} />
{errors.email && <div aria-live="polite">{errors.email}</div>}