Reactjs 不适用于react钩子窗体或材质ui

我正在尝试使用react-hook表单库来验证表单。当表单为空，我点击“sand”时，它应该给出一个错误，但它没有显示任何内容。我不明白为什么它不工作。我在这里做了一切。 InputField和IMaskPhoneInput返回

import{IMaskPhoneInput，InputField}来自“../../../common/model”；
从“React”导入React，{useState}；
从“类名”中导入cn；
从“react hook form”导入{useForm}；
从“yup”导入*作为yup；
导出常量PopupCallMe=（道具）=>{
const SignupSchema=yup.object（）.shape({
电话：是的
.string（）
.transform（（值）=>{
返回值。替换（/[^0-9]/g，“”）；
})
.min（11，“аааааааааааа”
.要求（“бзбзббббббббббб，
名字：是的
.string（）
.必需（“бзбзббббббббббб
.匹配（/^[A-Za-zА-Яа-агё]+$/，“аааагаггагёг
.min（2，“цццццццц”）
.max（15，“ццццццццц”）
.typeError（类型错误），
});
常量{register，handleSubmit，errors}=useForm({
validationSchema:SignupSchema，
模式：“未接触”，
重新验证模式：“onBlur”，
});
const onSubmit=（值）=>{
console.log（值）；
};
const[showDescr，setShowDescr]=useState（false）；
const[value，setValue]=使用状态（“顺序”）；
常量handleChangeCheck=（事件）=>{
设置值（event.target.value）；
};
返回(
Перезвонить мне
Оператор перезвонит в течение 1 часа (с 9:00 до 21:00 по местному
времени)
Отправить
);
};

您没有“提交”按钮解决了问题外接程序useForm

解析程序：yupResolver（SignupSchema），

和在输入时

{…register（“name”）}

import { IMaskPhoneInput, InputField } from "../../../common/model";
import React, { useState } from "react";
import cn from "classnames";
import { useForm } from "react-hook-form";
import * as yup from "yup";

export const PopupCallMe = (props) => {
  const SignupSchema = yup.object().shape({
    phone: yup
      .string()
      .transform((value) => {
        return value.replace(/[^0-9]/g, "");
      })
      .min(11, "Некорректный номер телефона")
      .required("Обязательное поле"),
    firstName: yup
      .string()
      .required("Обязательное поле")
      .matches(/^[A-Za-zА-Яа-яЁё]+$/, "Недопустимое имя")
      .min(2, "Недопустимое имя")
      .max(15, "Недопустимое имя")
      .typeError("Некорректное тип"),
  });

  const { register, handleSubmit, errors } = useForm({
    validationSchema: SignupSchema,
    mode: "onTouched",
    reValidateMode: "onBlur",
  });

  const onSubmit = (values) => {
    console.log(values);
  };

  const [showDescr, setShowDescr] = useState(false);
  const [value, setValue] = useState("order");

  const handleChangeCheck = (event) => {
    setValue(event.target.value);
  };

  return (
    <div className={s.popup_wrap}>
      <div className={s.title}>Перезвонить мне</div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <IMaskPhoneInput
            autoFocus
            fullWidth
            name={"phone"}
            mask={"+{7} (000) 000-00-00"}
            color="primary"
            label={"Телефон"}
            placeholder={"+7 (950) 356-55-44"}
            inputRef={register}
            error={errors.phone}
            helperText={errors.phone && errors.phone.message}
          />
          <div className={s.subtext}>
            Оператор перезвонит в течение 1 часа (с 9:00 до 21:00 по местному
            времени)
          </div>
        </div>

        <div className={s.addName}>
          <InputField
            fullWidth
            name={"firstName"}
            type={"text"}
            label={"Моё имя"}
            placeholder={"Глеб"}
            inputRef={register}
            error={errors.firstName}
            helperText={errors.firstName && errors.firstName.message}
          />
        </div>
        <div className={s.wrapButton}>
          <button className={cn("button", s.button)}>Отправить</button>
        </div>
      </form>
    </div>
  );
};