Рабочий пример в песочнице: https://codesandbox.io/s/happy-thunder-8ymnpx?file=/src/App.js:840-849
- В проекте используется комбинация библиотек react-hook-form + react-input-mask
- В форме используются 2 типа полей: обычные input и поля InputMask
- Заполнение и очищение полей происходит через react-hook-form (setValue, reset)
Проблема #1: Если нажать "заполнить" - все поля заполняются данными в штатном режиме. Но если нажать "очистить", а после этого "заполнить" - обычные input заполняются данными, а InputMask остаётся пустым. Почему это происходит и как этого избежать?
Проблема #2: Если нажать "заполнить" - в InputMask приходят данные, но при клике на само это поле, оно сразу очищается. Как сделать, чтобы данные при клике не пропадали?
import { useForm, FormProvider } from "react-hook-form";
import InputMask from "react-input-mask";
import "./styles.css";
export default function App() {
const methods = useForm({
defaultValues: {
name: "",
surname: "",
masked: ""
}
});
const data = {
name: "Name",
surname: "Surname",
masked: "012-345"
};
function handleFill() {
methods.setValue("name", data.name);
methods.setValue("surname", data.surname);
methods.setValue("masked", data.masked);
}
function handleClear() {
methods.reset();
}
return (
<div className="App">
<h1>react-hook-form + react-input-mask</h1>
<FormProvider {...methods}>
<input type="text" placeholder="input" {...methods.register("name")} />
<input
type="text"
placeholder="input"
name="surname"
{...methods.register("surname")}
/>
<InputMask
type="text"
placeholder="InputMask"
name="masked"
mask="999-999"
inputRef={methods.register("masked").ref}
/>
<br />
<br />
<button onClick={handleFill}>Заполнить</button>{" "}
<button onClick={handleClear}>Очистить</button>
</FormProvider>
</div>
);
}