将Material UI表单中的值存储在TypeScript中

interface FormValues {
  name: string;
  email: string;
  password: string;
}

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

const MyForm: React.FC = () => {
  const [formValues, setFormValues] = useState<FormValues>({
    name: '',
    email: '',
    password: '',
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // 在这里可以对表单的值进行处理或发送到服务器
    console.log(formValues);
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField
        name="name"
        label="Name"
        value={formValues.name}
        onChange={handleChange}
      />
      <TextField
        name="email"
        label="Email"
        value={formValues.email}
        onChange={handleChange}
      />
      <TextField
        name="password"
        label="Password"
        type="password"
        value={formValues.password}
        onChange={handleChange}
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
};

export default MyForm;