react如何获取表单输入数据

使用受控组件获取表单数据

在React中，受控组件通过将表单元素的值与组件的state绑定实现数据获取。表单元素的值由React控制，每次输入变化时更新state。

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted value:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

使用非受控组件通过Ref获取数据

非受控组件通过useRef直接访问DOM元素的值，适用于无需实时验证或处理的表单。

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted value:', inputRef.current.value);
  };

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

处理多字段表单数据

对于包含多个输入的表单，可通过动态state管理或使用FormData对象简化数据收集。

动态state管理示例：

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('Form data:', formData);
};

使用FormData对象示例：

const handleSubmit = (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  console.log('Username:', data.get('username'));
};

结合第三方库简化表单处理

库如Formik或React Hook Form可优化表单状态管理和验证。

React Hook Form示例：

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

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

  const onSubmit = (data) => {
    console.log(data);
  };

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