将 useCallback 函数传递给 Formik innerRef 以监听状态变化？

Question

我想知道是否有人有将回调从 useCallback 传递到 Formik 的 innerRef 道具的经验。我没有经常使用这个钩子，所以我仍在努力更好地理解它。

目前，我有以下内容，它适用于从 <Formik> 组件外部触发 Formik 提交，但我正在努力根据 Formik 的 isValid 的更改更新 isSavingDisabled ] 状态，因为 React 引用在指定为依赖项时不会触发 useEffect（如 React 文档中所述）。

const MyModal = () => {

  const [isSavingDisabled, setSavingDisabled] = useState( false )
  const formikRef = useRef()

  const doSave = () => {
    if ( formikRef.current ) {
      formikRef.current.handleSubmit()
    }
  }

  return (
    <Modal>
      <ModalHeader>My Modal Header</ModalHeader>
      <ModalBody>
        <Formik innerRef={formikRef} {...formikProps}>
          { /* Form body */ }
        </Formik>
      </ModalBody>
      <ModalFooter>
        <Button disabled={isSavingDisabled} onClick={doSave}>
          Save
        </Button>
      </ModalFooter>
    </Modal>
  )
}

我需要：1) 保留对 handleSubmit 的引用，以便我可以从 <Formik> 组件外部调用它，而且 2) 监听 isValid 属性 Formik 的状态，这样我就可以在 isValid === false.

时禁用保存按钮

我看到 useCallback，可能与 useState 配对，可以用来代替 useRef，但我运行进入渲染循环。谁能指出我正确的方向？提前致谢！

Answer 1

经过大量搜索和阅读，我发现了这个：https://github.com/formium/formik/discussions/2746，其中讨论了使用 useFormik 挂钩与 FormikProvider 上下文提供程序。这给了我我需要的东西，我希望这种用法得到适当的记录。 :)

将 useCallback 函数传递给 Formik innerRef 以监听状态变化？

pass a useCallback function to Formik innerRef to listen for state changes?

javascript

reactjs

formik