react如何提交表单

表单提交的基本方法

在React中提交表单通常通过控制组件状态和事件处理实现。表单数据通过onSubmit事件捕获，并阻止默认提交行为以避免页面刷新。

import { useState } from 'react';

function FormExample() {
  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);
    // 此处可添加API调用
  };

  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>
  );
}

使用Formik库简化流程

Formik是流行的表单管理库，可自动处理表单状态、验证和提交。以下为典型用法：

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

function FormikExample() {
  const initialValues = { email: '' };

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

文件上传处理

文件上传需使用FormData对象包装数据，并通过multipart/form-data格式发送：

function FileUpload() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', e.target.files[0]);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      console.log(await response.json());
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" name="file" />
      <button type="submit">Upload</button>
    </form>
  );
}

表单验证实现

可通过原生HTML5属性或库如Yup进行验证：

// 原生验证
<input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" />

// Yup配合Formik
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
});

<Formik
  initialValues={{ email: '' }}
  validationSchema={validationSchema}
  onSubmit={/* ... */}
>
  {({ errors }) => (
    <Form>
      <Field name="email" />
      {errors.email && <div>{errors.email}</div>}
    </Form>
  )}
</Formik>

第三方服务集成

与API服务交互时，通常使用fetch或axios发送数据：

const submitToAPI = async (data) => {
  try {
    const response = await axios.post('https://api.example.com/submit', data);
    console.log('Success:', response.data);
  } catch (error) {
    console.error('Error:', error.response?.data);
  }
};

// 在handleSubmit中调用
handleSubmit = (e) => {
  e.preventDefault();
  submitToAPI(formData);
};