React Final Form自定义组件如何订阅价值

如何解决React Final Form自定义组件如何订阅价值

所以我想使用React Final Form，因为它看起来很棒，简单但功能强大。我已经成功将其与自己的react组件一起使用，但是在使用自己的自定义组件时遇到了麻烦。

我似乎无法全神贯注于如何订阅自定义组件的值。我特定的自定义组件是一个问卷，该问卷包含6个问题，每个问题由5个单选按钮组成，如下所示：

const questionObjectArray = [{
   id: 1,question: "Example question text",answers: [{
           text: "Example answer text",value: 1.1,}],} ...restofquestions]

const Questions = () => {
   return (<>
   {questionObjectArray.map((currentQuestion) => {
       return (<>
          <AnswerGroup choices={currentQuestion.answers} />
       </>)}
</>)
}

所以React Final Form上的文档告诉我制作这样的适配器：

const QuestionsAdapter = ({ input,...rest }) => (
  <Questions
    {...input}
    {...rest}
    onChange={(event,value) => input.onChange(value)}
  />
)

，然后在组件的组件内部使用此适配器，如下所示：

    <Form
        onSubmit={(formObj) => {
          console.log(formObj)
        }}
      >
        {({ handleSubmit,form,submitting,values,invalid }) => (
          <form onSubmit={handleSubmit}>
              <Field 
              name="myField" 
              component={QuestionsAdapter}
              />)}
              </form>
     </Form>

这不起作用。但是因为我不太了解它是如何工作的，所以我不知道如何获取自定义组件中的值并从React Final Form订阅它们。如果有人可以帮助我掌握它的工作原理，将不胜感激。

最初的想法是，因为我正在映射其值位于questionsObjectArray内的单选按钮，所以我在链中某处缺少指向这些值的链接。

以下是第三方组件https://codesandbox.io/s/40mr0v2r87?file=/index.js:285-306的RFF示例 这里是文档：https://final-form.org/docs/react-final-form/api/Field