如何在 React 中创建表单

使用受控组件创建表单

在 React 中，受控组件是处理表单输入的标准方式。每个表单元素的值由 React 状态管理，并通过 onChange 事件更新。

import { useState } from 'react';

function MyForm() {
  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 元素获取表单值，适合简单表单或需要集成第三方库时使用。

import { useRef } from 'react';

function MyForm() {
  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 MyForm() {
  const { register, handleSubmit } = useForm();

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

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

表单验证实现

基本验证可以直接在受控组件中实现，更复杂的验证建议使用 Yup 等库配合表单库使用。

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);
  }
};

处理多步骤表单

对于需要分步骤填写的长表单，可以使用状态管理来跟踪当前步骤。

const [step, setStep] = useState(1);
const [formData, setFormData] = useState({
  /* initial data */
});

const nextStep = () => setStep(prev => prev + 1);
const prevStep = () => setStep(prev => prev - 1);

return (
  <form>
    {step === 1 && (
      <Step1 
        data={formData} 
        onChange={handleChange} 
        onNext={nextStep}
      />
    )}
    {step === 2 && (
      <Step2
        data={formData}
        onChange={handleChange}
        onPrev={prevStep}
        onSubmit={handleSubmit}
      />
    )}
  </form>
);