javascript - 以 redux-form 形式添加多个

Question

我应该在 <Field/> 中同时输入问题和答案。 。因为 redux-form 文档告诉我使用 <Fields/> .

<Fields names={['question1', 'answer1']}
    component={this.renderInputGroupField} />
<Fields names={['question2', 'answer2']}
    component={this.renderInputGroupField} />
<Fields names={['question3', 'answer3']}
    component={this.renderInputGroupField} />

用这个渲染字段

renderInputGroupField(fields){
    return(
        <div className="form-group d-block">
            <div className="form-group input-group">
                <select className="form-select" >
                    <option>Multiple-Choice</option>
                    <option>Open-Ended</option>
                </select>
                <input {...fields.question1.input}
                    type="text"
                    className="form-input"
                    placeholder="Type your question..."/>
            </div>
            <div className="form-group">
                <input {...fields.answer1.input}
                    type="text"
                    className="form-input"
                    placeholder="Comma-separated answer choices" />
            </div>
        </div>
    );
}

制作 renderInputGroupField工作，我应该添加 {...fields.answer1.input}进入<input />如上。问题就在这里。传递到字段的名称不同，我找不到更改的方法 ...fields.answer1.input至...fields.answer2.input动态地。

我不确定我是否能够正确解释它。感谢您的帮助。

Answer 1

所以，您似乎想使用 renderInputGroupField 作为可重用组件。快速测试一下，看起来 redux-form 也会发回您最初指定的名称列表。您应该能够使用名称数组中的索引来访问名称数组中列出的字段的属性，如下所示。

return(
  <div className="form-group d-block">
    <div className="form-group input-group">
      <select className="form-select">
        <option>Multiple-Choice</option>
        <option>Open-Ended</option>
      </select>
      <input {...fields[fields.names[0]].input}
             type="text"
             className="form-input"
             placeholder="Type your question..."/>
    </div>
    <div className="form-group">
      <input {...fields[fields.names[1]].input}
             type="text"
             className="form-input"
             placeholder="Comma-separated answer choices" />
    </div>
  </div>
);