форма реагирующего крючка становится грязной, когда к ней прикасаются

Question

Предостережение: я новичок в Javascript / React / response-hook-form, так что это может быть чем-то очевидным, но когда я использую нестроковые значения по умолчанию для полей в форме, форма помечается как грязная, как только касаются поля, и содержимое поля не изменяется.

Например;

<code>import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

export default function Form() {
  //Declare default values
  const defaults = {
    Firstname: "Fred",
    Lastname: "Bloggs",
    Age: 30
  };

  const { register, handleSubmit, formState } = useForm({
    mode: "onChange",
    defaultValues: { ...defaults }
  });
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  // make sure to read state before render to subscribe to the state update (Proxy).
  const { dirtyFields } = formState;

  // check your dev console, it's a Set
  console.log(dirtyFields);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Full name</label>
      <input type="text" name="Firstname" ref={register({ required: true })} />

      <label>Last name</label>
      <input type="text" name="Lastname" ref={register({ required: true })} />

      <label>Age</label>
      <input type="number" name="Age" ref={register} />

      <pre>{JSON.stringify(formState, null, 2)}

); } const rootElement = document.getElementById ("root"); ReactDOM.render ( , rootElement);

Ссылка на CodeSandbox https://codesandbox.io/s/react-hook-form-formstate-dirty-touched-submitted-0rcrj?file= / src / index. js

Щелкнув по полю Возраст, а затем по любому другому полю, не внося никаких изменений, отмечает грязный флаг.

Я предполагаю, что это потому, что форма обрабатывает все как строку и поэтому в случае поля Age 30! == "30", и поэтому форма становится грязной, даже если в пользовательском интерфейсе ничего не изменилось?

Если я изменю значение по умолчанию на Age: «30», тогда форма не станет грязной, поэтому кажется, что это подтверждает.

Я пытаюсь использовать грязный флаг для включения / отключения кнопки отправки, но эта проблема нарушает это.

Есть ли способ обойти это? Как с этим справляются другие?

Answer 1

Это очень интересный улов, и я думаю, вы правы относительно причины.

Обходной путь - использовать <Controller> или вручную register поле и применить преобразование с помощью parseInt.

<Controller
    name="Age"
    control={control}
    type="number"
    as="input"
    onChange={([event]) => parseInt(event.target.value)}
/>