使用MaterialUI和ReactJS提交和验证表单

npm install @material-ui/core react react-dom

import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';

const FormComponent = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // 在这里可以将name和email的值发送到后端服务器
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField
        label="Name"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <TextField
        label="Email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
};

export default FormComponent;

import React from 'react';
import FormComponent from './FormComponent';

const App = () => {
  return (
    <div>
      <h1>Submit and Validate Form</h1>
      <FormComponent />
    </div>
  );
};

export default App;

npm install formik

import React from 'react';
import { TextField, Button } from '@material-ui/core';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const FormComponent = () => {
  const handleSubmit = (values) => {
    // 在这里可以将values发送到后端服务器
  };

  const validateForm = (values) => {
    const errors = {};

    if (!values.name) {
      errors.name = 'Required';
    }

    if (!values.email) {
      errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
      errors.email = 'Invalid email address';
    }

    return errors;
  };

  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validate={validateForm}
      onSubmit={handleSubmit}
    >
      <Form>
        <Field
          as={TextField}
          label="Name"
          name="name"
          error={!!errors.name}
          helperText={<ErrorMessage name="name" />}
        />
        <Field
          as={TextField}
          label="Email"
          name="email"
          error={!!errors.email}
          helperText={<ErrorMessage name="email" />}
        />
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </Form>
    </Formik>
  );
};

export default FormComponent;