向“handleSubmit”注入自定义道具/方法的方法？答案

【问题标题】：Way to inject custom props/methods to `handleSubmit`?向“handleSubmit”注入自定义道具/方法的方法？
【发布时间】：2020-04-24 03:48:17
【问题描述】：

我正在使用react hook form，并且我正在寻找一种将自定义道具注入挂钩返回的handleSubmit 方法的方法。我需要这样做的原因是我的组件充当Consumer 的state library，并且我想在提交表单后更新状态。我可能还想将道具传递给方法。

从 API 看来，这似乎是不可能的。关于解决方法或如何做到这一点的任何想法？

【问题讨论】：

标签： reactjs react-hooks react-context react-hook-form unstated

【解决方案1】：

我不使用这个库，但似乎从 useForm 钩子返回的 getValues 函数打开了将您的组件状态与存储在“react-hook-form”中的表单数据同步的方式：

docs

import React, { useMemo, useEffect, useState } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, getValues } = useForm();
  const [ valuesState, setValuesState ] = useState();

  const values = useMemo(() => getValues());

  useEffect(() => setValuesState(values), [values]);

  return (
    <form>
      [...]
    </form>
  );
}

【讨论】：

【解决方案2】：

为什么不在handleSubmit 期间更新状态？

export default function App() {
  const { register, getValues } = useForm();
  const onSubmit = data => {
    // do your state update here update(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      [...]
    </form>
  );
}

【讨论】：

不幸的是，在我的情况下，我无法从函数体访问状态，只能从 return (...) 块访问。我正在使用github.com/jamiebuilds/unstated。但是@Mateusz 提出了一个很好的解决方案。