访问父组件中的表单（react-final-form）状态答案

【问题标题】：Access form(react-final-form) state in the parent component访问父组件中的表单（react-final-form）状态
【发布时间】：2019-12-07 11:27:04
【问题描述】：

如何在父组件中访问表单状态

这就是我正在做的（只是一个简短的代码，请忽略语法）

class Parent {
   <listComponent
     onSelect: handler
   >
  handler() {
    // Do this only if the already opened ChildComp in not dirty
     <ChildComp>
  }
}
// Uses react-final-form
class ChildComp {
   <form
      onSubmit: handleSubmit
      render: renderForm
    >
     renderForm ({dirty}){
      // Assigning to a class variable and prompting for unsaved changes which I am able to do
       this.isFormDirty = dirty
      return(
         <InputField>
     );
   }
   </form>
}

现在的问题是，如果孩子在 onSelect 处理程序（）中很脏，我无法通知父母不要渲染孩子。我不能在渲染方法中执行 setState，至少我可以使用 componentDidUpdate 通知提前致谢

【问题讨论】：

标签： reactjs validation react-final-form

【解决方案1】：

复制自Issue #551:

另一种可能性是最近有一个 API 更改，将 lets you provide your own form instance 更改为 <Form>，所以这样的事情可能会起作用：

import { createForm } from 'final-form'

function TestForm() {
  const formRef = React.useRef(createForm({
    onSubmit: myOnSubmit
  })
  return (
    <div>
      <Form form={formRef.current}>
        {({ handleSubmit, form }) => (
          <form onSubmit={handleSubmit}> ... fields ... </form>
        )}
      </Form>
      <button onClick={() => formRef.current.reset()}>Reset</button>
    </div>
  )
}

【讨论】：