当前位置：首页 > React

如何封装表单react

2026-02-26 04:19:15React

封装表单的 React 组件

基础表单封装

创建一个可复用的表单组件，包含输入框、提交按钮和状态管理：

如何封装表单react

import React, { useState } from 'react';

const Form = ({ fields, onSubmit }) => {
  const [formData, setFormData] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {fields.map(field => (
        <div key={field.name}>
          <label>{field.label}</label>
          <input
            type={field.type || 'text'}
            name={field.name}
            value={formData[field.name] || ''}
            onChange={handleChange}
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );
};

使用示例

function App() {
  const formFields = [
    { name: 'username', label: '用户名', type: 'text' },
    { name: 'password', label: '密码', type: 'password' }
  ];

  const handleSubmit = (data) => {
    console.log('表单数据:', data);
  };

  return <Form fields={formFields} onSubmit={handleSubmit} />;
}

高级封装（包含验证）

添加表单验证功能：

const ValidatedForm = ({ fields, onSubmit }) => {
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    fields.forEach(field => {
      if (field.required && !formData[field.name]) {
        newErrors[field.name] = field.errorMessage || '必填字段';
      }
    });
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

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

  // ...其余代码与基础表单类似，增加错误显示
  return (
    <form onSubmit={handleSubmit}>
      {fields.map(field => (
        <div key={field.name}>
          <label>{field.label}</label>
          <input
            // ...其他属性
          />
          {errors[field.name] && <span>{errors[field.name]}</span>}
        </div>
      ))}
    </form>
  );
};

使用第三方库

对于复杂表单，推荐使用Formik或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>必填字段</span>}
      <button type="submit">提交</button>
    </form>
  );
}

如何封装表单react