react中如何动态收集表单数据

动态收集表单数据的常用方法

在React中动态收集表单数据通常需要结合状态管理和事件处理。以下是几种常见实现方式：

受控组件方式

通过将表单元素的值绑定到组件状态，并使用onChange事件更新状态：

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

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

  return (
    <form>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
    </form>
  );
}

动态字段处理

对于动态生成的表单字段，可以使用字段数组管理：

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

  const handleChange = (id, value) => {
    setFields(fields.map(field =>
      field.id === id ? { ...field, value } : field
    ));
  };

  const addField = () => {
    setFields([...fields, { id: Date.now(), value: '' }]);
  };

  return (
    <form>
      {fields.map(field => (
        <input
          key={field.id}
          value={field.value}
          onChange={(e) => handleChange(field.id, e.target.value)}
        />
      ))}
      <button type="button" onClick={addField}>Add Field</button>
    </form>
  );
}

使用Formik库

Formik提供了完整的表单解决方案：

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

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

使用Ref非受控方式

对于不需要实时验证的简单表单：

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(formRef.current);
    const data = Object.fromEntries(formData);
    console.log(data);
  };

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

自定义Hook封装

创建可复用的表单逻辑：

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

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

  return [values, handleChange];
}

function CustomHookForm() {
  const [formData, handleChange] = useForm({ username: '', password: '' });

  return (
    <form>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
    </form>
  );
}

以上方法可根据项目需求选择使用，受控组件方式适合需要实时验证的场景，非受控方式适合简单表单，Formik适合复杂表单管理。