Здравствуйте.
Подскажите, пожалуйста, как можно очистить поля формы в 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... 
Средний
