当我单击其中的另一个onClick（）时，如何使onClick（）不触发？

Question

我想在此div内添加一个孩子（deletePost按钮）。问题是，当我单击它时，父级也会被单击。如何防止这种情况发生？

{!this.state.userSelectionArea &&
            this.state.jobData.data.map(data => {
              if (data.urgent !== "true") {
                return (

                  <div
                    onClick={e => this.showModalJob(data.id)}
                    className="postData"
                    key={data.id}
                  >
                  {data.facebookid === this.state.user.id &&
                      <button onClick={this.deletePost} className="deletePostButton">
                      <i className="fa fa-close" />
                      </button>}
                    <p>
                      <span className="postConnector">
                        {" "}
                        {this.context.main.seeking3}{" "}
                      </span>
                      <span className="posterGoal">{data.jobtype}</span>
                    </p>
                    <p className="postArea">{data.area}</p>
                    <div className="postMoment">
                      <Moment fromNow>{data.created_at}</Moment>
                    </div>
                  </div>

                );
              }
            })}

Answer 1

Event.stopPropagation()将阻止click事件冒泡并触发父级的click事件。

childAction = event => {
    event.stopPropagation();
    // Action
}

<button onClick={ e => this.childAction(e) }>Next Action</button>