React hook Form 知道值何時被修改

Question

我們如何知道表單是否在 react-hook-form 中被修改。 任何人都有想法。 我想知道是否更改了任何值並將 state 編輯為 true。

在我將 defaultValue 提供給 useForm({defaultValues:values}) 之后。 我想在值從 defaultValue 更新或更改時得到通知。

Answer 1

使用isDirty屬性

function YourComponent() {
 const { formState } = useForm();
 const isFormEdited = formState.isDirty;
 ....

這是文檔參考

Answer 2

您也可以使用formstate中的dirtyFields，檢查修改字段的長度。

const [isEdited, setIsEdited] = useState(false);
const fieldsEdited = formState.dirtyFields;
useEffect(() => {
    if (Object.keys(fieldsEdited).length > 0) {
        setIsEdited(true);
    } else {
        setIsEdited(false);
    }
}, [fieldsEdited]);

Answer 3

想出了如何做到這一點。 指定 defaultValues 屬性很重要。

請參閱 formState文檔的 isDirty 部分：

確保在 useForm 中提供所有輸入的 defaultValues，這樣鈎子表單可以有一個單一的事實來源來比較表單是否臟。

還有一個簡短的例子：

  const {
    formState: {
      isDirty, 
    },
  } = useForm<ProfileFormInterface>({
    defaultValues: {name: 'John Doe', email: 'jd@johndoe.com'},
  })

isDirty現在僅在名稱或 email 更改時才為真。