表单提交时使用Material-UI默认校验，点击提交无反应如何解决

你实现的带校验功能的React表单点击提交按钮无响应，且无法触发Material-UI的默认校验提示。

• 提交按钮未指定type="submit"属性：Material-UI的Button组件默认type是button，不会触发form的submit事件，这是点击提交无反应的核心原因
• 未将React Hook Form的校验错误状态绑定到TextField组件：你只配置了校验规则，但没有把errors.title的状态传递给TextField的error和helperText属性，因此无法触发MUI的默认错误提示样式
• postTicket接口请求漏传请求体：axios.post的第二个参数为请求体，当前代码仅传了请求地址，提交的表单数据不会被发送到后端

import React from 'react';
import { useForm } from "react-hook-form";
import axios, {AxiosResponse} from "axios";
import { Button, Container } from "@material-ui/core";
import TextField from '@material-ui/core/TextField';

export async function postTicket(data: TicketDTO): Promise<AxiosResponse<TicketDTO[]>> {
  // 补上请求体参数data
  return await axios.post<TicketDTO[]>(
      `http://localhost:8080/api/support/tickets/create`,
      data
  );
}

export interface TicketDTO {
  title?: string;
}

export default function OpenTicket(props: any) {
  const {
      register,
      handleSubmit,
      formState: { errors }
  } = useForm<TicketDTO>();

  const onSubmit = async (data: TicketDTO) => {
      try {
          await postTicket(data);
          console.log('提交成功', data)
      } catch (err) {
          console.log(err);
      }
  };

  return (
      <Container>
           <form onSubmit={handleSubmit(onSubmit)}>
               <TextField
                   id="outlined-full-width"
                   label="Name"
                   {...register("title", { required: "标题不能为空", maxLength: {value:20, message: "标题长度不能超过20位"} })}
                   placeholder="Placeholder"
                   // 绑定错误状态触发MUI默认错误样式
                   error={!!errors.title}
                   // 有错误时显示校验提示，否则显示原有辅助文字
                   helperText={errors.title ? errors.title.message : "Full width!"}
                   fullWidth
                   margin="normal"
                   InputLabelProps={{
                       shrink: true,
                   }}
                   variant="outlined"
               />

              <Button
                  type="submit"
                  variant="contained"
                  color="primary"
                  size="small"
              >
                  Submit
              </Button>
          </form>
      </Container>
  );
}

内容的提问来源于stack exchange，提问作者Peter Penzov