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

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

Adding multiple <Fields /> in redux-form

javascript

reactjs

redux-form

react-redux