react如何获取表单

获取表单数据的方法

在React中获取表单数据可以通过多种方式实现，具体取决于组件的类型（受控或非受控）以及是否需要实时更新或提交时获取。

受控组件方式

受控组件通过将表单元素的值与React组件的state绑定，实现数据的实时同步。每次输入变化时，更新state并触发重新渲染。

import { useState } from 'react';

function ControlledForm() {
  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 data:', 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 UncontrolledForm() {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted data:', {
      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>
  );
}

使用FormData对象

通过FormData API可以快速收集表单中的所有数据，无需手动绑定每个字段。适用于动态表单或字段较多的情况。

function FormDataExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    console.log('Submitted data:', data);
  };

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

第三方库辅助

对于复杂表单，可以使用Formik或React Hook Form等库简化状态管理和验证逻辑。以下是React Hook Form的示例：

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

function HookFormExample() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log('Submitted data:', data);
  };

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

动态表单字段处理

当表单字段动态生成时，可以通过以下方式收集数据：

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Array.from(formData.entries());
    console.log('Submitted data:', data);
  };

  return (
    <form onSubmit={handleSubmit}>
      {fields.map(field => (
        <input
          key={field.id}
          name={`field-${field.id}`}
          defaultValue={field.value}
        />
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}