@SNina
Отчаянно пытаюсь научиться писать хорошие сайты

Как очистить поля формы в React при использовании библиотеки Yup?

Здравствуйте.
Подскажите, пожалуйста, как можно очистить поля формы в React (использую React Hook Form и Yup)?
Вот мой код:
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

const nameRegExp = /[a-zа-яA-ZА-Я]$/;
const schema = yup.object().shape( {
  name: yup
    .string()
    .required( "Пожалуйста, заполните это поле" )
    .matches( nameRegExp, "Допускаются только латинские или кирилические буквы" )
    .min( 2, "В этом поле должно быть не менее 2-х символов" )
    .max( 15, "В этом поле должно быть не более 15-х символов" )
})

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

function ContactForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm( {
    resolver: yupResolver( schema ),
    mode: "onBlur",
  } );

return (
   
      <form
        className="form"
        action="#"
        method="post"
        onSubmit={ handleSubmit( onSubmit ) }
      >
 <input
            className={
              errors.name ? "form-item form-item--error text" : "form-item text"
            }
            { ...register( "name" ) }
            type="text"
            placeholder="Name"
            name="name"
            // value={ name }
            // onChange={ (e) => setName( e.target.value ) }
          />
 { errors.name && <p className="form--error">{ errors.name.message }</p> }
 </form>
     
  );
}

export default ContactForm;

Если я не использую в input value={ name } onChange={ (e) => setName( e.target.value ) }, то поля формы не очищаются. Если использую - не удаляется сообщение об ошибке (например, "заполните это поле"), хотя сама ошибка уже исправлена (т.е. поле заполнено, а сообщение об ошибке все высвечивается)
Ссылка на код в GitHub - https://github.com/youngFrontendDeveloper/Restaura...
  • Вопрос задан
  • 234 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы