react实现提交

表单提交的基本实现

在React中实现表单提交通常需要结合状态管理和事件处理。使用useState钩子管理表单数据，通过onSubmit事件处理提交逻辑。

import React, { useState } from 'react';

function FormComponent() {
  const [formData, setFormData] = useState({ name: '', email: '' });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted:', formData);
    // 这里可以添加API调用
  };

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

使用Formik库简化表单处理

Formik是流行的React表单库，可以简化表单状态管理和验证流程。

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

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

结合验证的提交实现

添加Yup进行表单验证，确保提交前数据有效。

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

function ValidatedForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log('Valid form submitted:', values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="name" type="text" />
          {errors.name && touched.name && <div>{errors.name</div>}

          <Field name="email" type="email" />
          {errors.email && touched.email && <div>{errors.email</div>}

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

异步提交处理

处理API请求等异步提交操作，显示加载状态和提交结果。

function AsyncSubmitForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitResult, setSubmitResult] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      setSubmitResult({ success: true, message: 'Submission successful' });
    } catch (error) {
      setSubmitResult({ success: false, message: 'Submission failed' });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="data" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {submitResult && (
        <div className={submitResult.success ? 'success' : 'error'}>
          {submitResult.message}
        </div>
      )}
    </form>
  );
}

文件上传提交

处理包含文件上传的表单提交需要使用FormData对象。

function FileUploadForm() {
  const [file, setFile] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    // 这里替换为实际的API端点
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });
    const result = await response.json();
    console.log('Upload result:', result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files[0])}
      />
      <button type="submit">Upload</button>
    </form>
  );
}