问题描述
所以我想使用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
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)