Question

我在React中使用嵌套组件有一个小问题。首先，我将说明问题所在。

我有一个包含问题的调查，其中包含子问题，其中包含子问题

因此，我们对3个问题级别进行了调查。

我正在使用称为Question的相同组件。如果一个问题有子问题，我将其称为子问题，其中又有一个问题数组。

每个问题都在道具中具有编辑或删除道具的功能。

问题是它适用于0和1级问题，但不适用于最后一级。尽管返回了第二级问题的question_id，但它仍返回了第一级问题的question_id。我想这是因为使用了嵌套组件。

这是两个组成部分：

问题

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

这是 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>
    );
  }
}

所以，如果我们有类似的东西：

问题1

---问题2

-------问题3

如果我单击问题3的delete btn，它将返回问题2。但是，如果我单击问题2，它也将起作用（级别1也是如此）。

我不知道该如何解决:( ..

让我知道我还不太了解，我会尝试更具体

谢谢！

Answer 1

好，找到了。

在SubQuestion组件中，以下几行：

onDelete = {id => this.props.onDelete（question.id）} onEdit = {id => this.props.onEdit（question.id）}

必须是：

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

我们不必再次触发它们。我得到了父ID，因为它每次都会触发。

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

1 个答案: