我有一个包含几个问题的表格。其中一些问题包含一组子问题。
{
(this.props.moduleDetails.questions[questionInfo].question_group && this.props.moduleDetails.questions[questionInfo].has_grouped_questions === 1) ?
<div className="sub-questions">
{
(this.props.moduleDetails.questions[questionInfo].question_group ) ?
<span>
{ this.renderQuestionGroup(questionInfo) }
<input type="button" onClick={(e) => { this.addQuestionGroup(questionInfo) }} value="Add" className="btn"/>
</span>
: null
}
</div>
: null
}
如您所见,renderQuestionGroup是显示子问题的方法。
renderQuestionGroup(questionInfo) {
let input = [];
input = this.display(questionInfo)
return input;
}
display(questionInfo) {
let input = [];
this.state && this.state.groupedQuestions && this.state.groupedQuestions[questionInfo] && this.state.groupedQuestions[questionInfo].map(
(qInfo, qIndex) => {
if(qInfo !== undefined) {
Object.keys(qInfo).map(
(questionInfo, index) => {
input.push(<QuestionAnswers
questionInfo={qInfo[questionInfo]}
generateStepData={this.props.generateStepData}
userEnteredValues={this.props.formValues}
key={qInfo[questionInfo].module_question_id+qIndex}
groupIndex={qIndex}
/>)
});
}
});
return input;
}
每个问题都放入一个输入数组中。
现在有一个“添加”按钮可以再次呈现问题组。
addQuestionGroup(qId) {
let sgq = this.state.groupedQuestions,
obj = this.state.groupedQuestions[qId][0],
copy = Object.assign({}, obj);
sgq[qId].push(copy)
this.setState({groupedQuestions: sgq});
}
因此,新的问题组将再次被推送到输入数组并在页面上呈现。
问题在于,由于所有问题组都是从同一数组呈现的,因此问题组之间不会有任何分隔。
也就是说,如果我按下添加按钮两次,第二个将在第一个组的正下方呈现。由于没有分隔,我们无法将第二个与第一个区分开。
关于如何解决此问题的任何想法?