在 redux-form 中添加多个 <Fields />

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>
);