反应嵌套组件错误的道具功能onClick

Question

I have a little issue using nested components in React. First, I will explain what's the problem.

I have a survey which contain questions, which contains sub-questions, which contains sub-questions

So we have a survey on 3 levels of questions.

I'm using the same component called Question. If a question has sub question, I call the component Subquestion in which I have again an array of Question.

Every Question has function in props to edit or delete them.

The problem is that it's working for the questions on level 0 and 1, but not for the last level. Despite of returning the question_id of the level 2 question, it returns the question_id of the level 1 question. I guess that it's because of the using of nested components.

Here are the 2 components:

Question

class Question extends Component {
  render() {
    const {
      question, onDelete, onEdit, onAddQuestion,
    } = this.props;
    return (
      <div
        key={question.id}
        id={`question-${question.id}`}
        className="panel-item"
      >
        <div className="panel-item-order">
          <div className="form-group form-group-transparent">
            <input type="text" name="input-text-title" className="form-control" placeholder="1" />
          </div>
        </div>
        <div className="panel-item-title">
          { question.name }
        </div>
        <div className="panel-item-mainstay">
          <i className={`icon-${question.pillar.code}`} />
          { question.pillar.name }
        </div>
        <div className="panel-item-actions">
          <button
            className="btn btn-circle"
            onClick={() => onDelete(question.id)}
          >
            <i className="icon-remove-question" />
          </button>
          <button
            className="btn btn-circle"
            onClick={() => onEdit(question.id)}
          >
            <i className="icon-edit" />
          </button>
          {
            question.level < 3 &&
              <div>
                {question.id}
            <button
              className="btn btn-circle"
              onClick={() => onAddQuestion(question.id)}
            >
              <i className="icon-add-question" />
            </button>
              </div>
          }
        </div>
        {
          question.questionsByAnswer &&
            <div className="panel-item-sub">
              { question.questionsByAnswer.map(answer => (
                <div key={answer.id}>
                <SubQuestion
                  answer={answer}
                  onEdit={onEdit}
                  onDelete={onDelete}
                  onAddQuestion={onAddQuestion}
                />
                </div>
                ))
              }
            </div>
        }
        <div className="hori-border-dotted" />
      </div>
    );
  }
}

And here is the SubQuestion

class SubQuestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };

    this.subQuestionsList = this.subQuestionsList.bind(this);
  }

  subQuestionsList(question) {
    return (<Question
      key={question.id}
      question={question}
      onDelete={id => this.props.onDelete(question.id)}
      onEdit={id => this.props.onEdit(question.id)}
      onAddQuestion={this.props.onAddQuestion}
    />);
  }

  render() {
    const { answer } = this.props;
    return (
      <section className="panel-section">
        <div
          className={`title-main title-section panel-section-title ${(this.state.open) ? '' : 'collapsed'}`}
          onClick={() => this.setState({ open: !this.state.open })}
        >
          { answer.label }
          <i className="icon-arrow-bottom" />
        </div>

        <Collapse in={this.state.open}>
          <div id="panel-section-appearance" className="panel-section-content">
            {
              answer.linkedParentQuestions.map(question => (
                this.subQuestionsList(question)
              ))
            }
          </div>
        </Collapse>
      </section>
    );
  }
}

So if we have something like :

Question 1

--- Question 2

------- Question 3

If I click on the delete btn on the question 3, it returns the question 2. But if I click on the question 2, it's working (the level 1 too).

I don't know how I can fix this :( ..

Let me know I'm not enough understandable, I will try be more specific

Thanks !

Answer 1

Ok, found it.

In SubQuestion component, the following lines:

onDelete={id => this.props.onDelete(question.id)} onEdit={id => this.props.onEdit(question.id)}

must be :

onDelete={this.props.onDelete)} onEdit={this.props.onEdit)}

We do not have to trigger them again. I got the parent ID because it was triggered every time.