Блог

Я пытаюсь проверить material-ui-phone-number поле с помощью YUP, но когда у меня был inputRef prop для компонента, YUP выдает сообщение об ошибке TypeError: e is undefined . Кажется, что material-ui-phone-number компонент отправляет значение, и YUP ожидает событие ( e.target.value )

Вы можете проверить песочницу здесь

Это мой код:

 import React, { useState } from "react";
import MuiPhoneNumber from "material-ui-phone-number";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers";
import * as yup from "yup";

const Step1Schema = yup.object().shape({
  name: yup.string().required("O campo nome é obrigatório"),
  email: yup
    .string()
    .required("O campo email é obrigatório")
    .email("Formato de email inválido"),
  phone: yup.mixed().test((value) => console.log(value))
});

const Step1 = ({ formData, nextStep, formStepData }) => {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(Step1Schema)
  });

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

  const [phone, setPhone] = useState("");
  return (
    <div data-aos="fade-up" id="house-form">
      <form onSubmit={handleSubmit(onSubmit)}>
        <MuiPhoneNumber
          id="contactPhoneNumber"
          inputRef={register}
          defaultCountry={"pt"}
          style={{ width: "100%" }}
          name="phone"
          label="Contacto telefónico"
          variant="outlined"
          margin="normal"
          value={phone}
          onChange={(value) => setPhone(value)}
          error={Boolean(errors.phone)}
        />
      </form>
    </div>
  );
};

export default Step1;
  

Вы всегда можете использовать Controller component для интеграции с любыми сторонними компонентами ввода, с которыми не работают готовые react-hook-form .

 const { control, ... } = useForm();

...

<Controller
  name="phone"
  control={control}
  render={({ name, onBlur, onChange, value }) => (
    <MuiPhoneNumber
      name={name}
      value={value}
      onBlur={onBlur}
      // onChange pass the raw value so you can access it using e instead of
      // e.target.value. props.onChange can accept the value directly
      onChange={onChange}
      {...}
    />
  )}
/>
  

Живая демонстрация