如何封装表单react

封装 React 表单的方法

封装 React 表单可以通过创建可复用的表单组件或自定义 Hook 来实现。以下是几种常见的方法：

使用受控组件封装表单

通过状态管理表单数据，将表单字段的值与 React 组件的状态绑定。这种方式适合需要实时验证或动态交互的表单。

import { useState } from 'react';

function Form({ onSubmit }) {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

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

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

使用自定义 Hook 封装表单逻辑

将表单的状态管理和事件处理逻辑提取到自定义 Hook 中，使表单组件更简洁。

function useForm(initialValues, onSubmit) {
  const [values, setValues] = useState(initialValues);

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

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

  return {
    values,
    handleChange,
    handleSubmit
  };
}

function Form() {
  const { values, handleChange, handleSubmit } = useForm(
    { username: '', password: '' },
    (data) => console.log(data)
  );

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={values.username}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={values.password}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

使用第三方库（如 Formik）

Formik 是一个流行的 React 表单库，提供了表单状态管理、验证和提交等功能。

import { Formik, Field, Form } from 'formik';

function FormikForm() {
  return (
    <Formik
      initialValues={{ username: '', password: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="username" type="text" />
        <Field name="password" type="password" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

封装动态表单字段

如果需要动态增减表单字段，可以通过数组管理字段状态。

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

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

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

  const handleRemove = (index) => {
    const newFields = [...fields];
    newFields.splice(index, 1);
    setFields(newFields);
  };

  return (
    <form>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            value={field.value}
            onChange={(e) => handleChange(index, e)}
          />
          <button onClick={() => handleRemove(index)}>Remove</button>
        </div>
      ))}
      <button onClick={handleAdd}>Add Field</button>
    </form>
  );
}

表单验证

在封装表单时，可以加入验证逻辑，确保用户输入符合要求。

function useFormWithValidation(initialValues, onSubmit) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

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

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

  return {
    values,
    errors,
    handleChange: (e) => {
      const { name, value } = e.target;
      setValues(prev => ({ ...prev, [name]: value }));
    },
    handleSubmit
  };
}

通过以上方法，可以根据需求灵活封装 React 表单，提高代码的复用性和可维护性。