如何使用React-final-form

时间:2019-06-24 21:46:40

标签: javascript reactjs forms react-final-form react-final-form-arrays

在我正在开发的应用程序中,有一个用于进行调查/投票的模块。后端已经编程,基本上有一个端点可以接受主体中的复杂对象,然后它将构建轮询。复杂的对象可以根据民意调查和问题类型而有所不同,有些是多项选择,有些是投票,有些是开放式的。我正在尝试构建此类复杂对象的一个​​示例:

{
  "title": "Newish first poll",
  "description": "juan's first wizard poll",
  "status": "new",
  "start_date": "2019-03-12 08:00:00",
  "end_date": "2019-03-25 08:00:00",
  "questions" : [
    {
        "question_text":"HOW CAN DIS BE",
        "type":"1",
        "choices": []
    },
    {
        "question_text":"Choose your weapon",
        "type":"0",
        "choices": [
            {
                "choice_text": "Sword",
                "description": "Sharp and durable, the sword is very popular."
            },
            {
                "choice_text": "Hammer",
                "description": "Stop!"
            },
            {
                "choice_text": "Poetry",
                "description": "Nothing more devastating than a poetry slam"
            }
        ]
    },
    {
        "question_text":"Do you agree?",
        "type":"1"
    }
  ]
}

因此,从本质上讲,该对象具有称为问题的fieldArray,其中包含问题对象。但是,如果这是一个多选题,则这些问题对象也可以包含选项数组,并且每个选项都有2个潜在字段,即选项文本和选项描述。

一般来说,仅使用onefield数组和可用的mutator推送,我就可以推送一个完整的问题对象,当前将其硬编码为一个这样传递的变量:按下按钮时push('questions',sampleQuestion1)

由于问题数组已经包含choices []数组,因此该表单将起作用,但是,我无法以与FieldArray顶层相同的方式在其他内部渲染choices数组的值

这是基本实现的样子

<FieldArray name='questions'>
    {({fields})=>(
        <div>
            {fields.map((question,i)=>(
                <div key={i}>
                    <div className={'form-group'}>
                        <InputField name={`${question}.question_text`} placeholder={'Pregunta'} disabled/>
                        <FieldArray name={'choices'}>
                            {({fields})=>(
                                //i would like to be able to map through fields of the choices array, if present
                            )}
                        </FieldArray>
                    </div>
                </div>
            ))}
        </div>
    )}
</FieldArray>

我尝试将组件放入另一个fieldarray中,这当然是很幼稚的,我很快发现push mutator已经被添加的数据调用,并且我无法映射选择的字段,因为这个问题父fields.map中传递的对象本身实际上不是问题对象。

我尝试了其他一些技巧,并且已经阅读了文档,但是我有点困惑。如果有人可以帮助我弄清楚这是否有可能,我将非常感谢

1 个答案:

答案 0 :(得分:1)

我认为您不了解FieldArray的用途。 FieldArray用于您的数据(表单提交的内容)由数组组成,其长度可由用户更改。您所拥有的是一系列要呈现到字段中的问题。您应该通过它们进行映射并渲染字段。

类似这样的东西:

<form>
  {questions.map((question, index) => (
    <label>{question.question_text}</label>
    {question.type === 1 && <Field name={`answers[${index}]`} component="input" type="checkbox"/>}
    {question.type === 0 && <Field name={`answers[${index}]`} component="select">
       {question.choices.map(choice => <option>{choice.choice_text}</option>}
     </Field>}
  ))}
</form>

我不能保证可以编译,但是应该可以为您提供总体思路。提交后,产品表单数据将具有一个answers数组,其索引与questions数组匹配。

有帮助吗?