父組件中的訪問表單（react-final-form）狀態

Question

如何在父組件中訪問表單狀態

這就是我正在做的（只是簡短的代碼，請忽略語法）

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 handler（）中臟了，我將無法通知父母不要渲染孩子。 我無法在render方法中執行setState，至少我可以使用componentDidUpdate進行通知

Answer 1

從問題＃551復制：

---

另一種可能性是，最近有一個API更改， 可讓您將自己的表單實例提供給<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>
  )
}