0

Рабочий пример в песочнице: https://codesandbox.io/s/happy-thunder-8ymnpx?file=/src/App.js:840-849

  1. В проекте используется комбинация библиотек react-hook-form + react-input-mask
  2. В форме используются 2 типа полей: обычные input и поля InputMask
  3. Заполнение и очищение полей происходит через 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>
  );
}

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.