Javascript 仅接触时，反应钩形状设置为脏

警告：我是Javascript/React/React钩子表单的新手，所以这可能是显而易见的，但是当我在表单中为字段使用非字符串默认值时，只要触摸字段并且没有更改任何字段内容，表单就会被标记为脏

比如,

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)}</pre>

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Form />, rootElement);

从“react-dom”导入ReactDOM；
从“react hook form”导入{useForm}；
导入“/styles.css”；
导出默认函数表单（）{
//声明默认值
常量默认值={
名字：“弗雷德”，
姓氏：“Bloggs”，
年龄:30
};
常量{register，handleSubmit，formState}=useForm({
模式：“onChange”，
默认值：{…默认值}
});
const onSubmit=data=>{
警报（JSON.stringify（数据））；
};
//确保在渲染前读取状态以订阅状态更新（代理）。
const{dirtyFields}=formState；
//检查你的开发控制台，它是一个集合
console.log（dirtyFields）；
返回(
全名
姓
年龄
{JSON.stringify（formState，null，2）}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

代码沙盒链接

单击年龄字段，然后单击任何其他字段，不做任何更改，标记脏标志

我猜这是因为表单将所有内容都视为字符串，因此在年龄字段30的情况下！==“30”，所以即使UI中没有任何更改，表单也会变脏

如果我将默认值更改为年龄：“30”，那么表单不会变脏，因此它似乎确认了这一点

我试图使用脏标志来启用/禁用提交按钮，但这个问题打破了这一点

---

这有什么办法吗？其他人是如何处理的？

这是一个非常有趣的问题，我认为你的理由是正确的

解决方法是使用

或手动

注册该字段，并使用
parseInt
应用转换

parseInt（event.target.value）}
/>

谢谢@trixn-这就像一个符咒。我一直在与控制器周旋，但无法获得正确的OnChange语句格式-这真的帮助了我！再次感谢@Tintow是的，这很奇怪，因为它通过了一个数组。函数签名可能会在未来版本（当前为候选版本）中更改，以接受普通事件。有关详细信息，请参阅。
<Controller
    name="Age"
    control={control}
    type="number"
    as="input"
    onChange={([event]) => parseInt(event.target.value)}
/>