分离一组输入组件-React.js

时间:2018-07-12 09:43:29

标签: reactjs

我有一个包含几个问题的表格。其中一些问题包含一组子问题。

{
  (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});
  }

因此,新的问题组将再次被推送到输入数组并在页面上呈现。

问题在于,由于所有问题组都是从同一数组呈现的,因此问题组之间不会有任何分隔。

也就是说,如果我按下添加按钮两次,第二个将在第一个组的正下方呈现。由于没有分隔,我们无法将第二个与第一个区分开。

关于如何解决此问题的任何想法?

0 个答案:

没有答案