当前位置：首页 > React

react如何创建表单

2026-01-23 23:20:59React

创建表单的基本结构

在React中创建表单可以通过<form>标签结合状态管理实现。使用useState钩子存储表单数据，并通过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('Submitted:', 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>
  );
}

表单验证

通过条件判断或第三方库（如yup、formik）实现验证逻辑。以下示例展示基础验证：

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

const validate = () => {
  const newErrors = {};
  if (!formData.username) newErrors.username = 'Username is required';
  if (formData.password.length < 6) newErrors.password = 'Password too short';
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (validate()) {
    console.log('Valid form:', formData);
  }
};

// 在输入框下方显示错误
{errors.username && <div style={{ color: 'red' }}>{errors.username}</div>}

使用受控组件

React推荐使用受控组件（Controlled Components），即表单元素的值由React状态驱动。通过value和onChange实现双向绑定。

<textarea
  name="description"
  value={formData.description}
  onChange={handleChange}
/>

处理多选框和单选按钮

对于checkbox或radio，需单独处理checked属性：

const [agreed, setAgreed] = useState(false);

<input
  type="checkbox"
  checked={agreed}
  onChange={(e) => setAgreed(e.target.checked)}
/>

使用表单库简化流程

复杂表单可借助库如Formik或React Hook Form。以下是React Hook Form的示例：

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

function HookForm() {
  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>}
      <button type="submit">Submit</button>
    </form>
  );
}

文件上传处理

通过<input type="file">捕获文件，使用FileReader或FormData处理上传：

react如何创建表单

const handleFileChange = (e) => {
  const file = e.target.files[0];
  console.log('Selected file:', file);
};

<input type="file" onChange={handleFileChange} />