Question

代码如下

<ul className="sb-modules-list">
    <li key={index} className={this.getModuleClass(module)} onClick={() => { alert(127) }}>
        <ul className="sb-module-steps-list">
           { module.steps && module.steps.map((stepInfo, stepIndex) =>
               <li key={stepIndex} className={this.getStepClass(stepInfo)}  onClick={() => { alert(456) }}>
                        <p>{stepInfo.short_title}</p>
                      </li>
                      )}
         </ul>
</ul>

问题是，当我点击最里面的孩子 li 标签时，它会触发儿童和父母的onclick事件。

例如，在这种情况下，点击触发警报（456）以及父功能警报（123）;

我不希望在单击子项时运行父方法。关于如何解决这个问题的任何想法？

Answer 1

您可以使用event.stopPropagation()来防止事件冒泡。考虑这个点击处理程序的例子：

const handleClick = (event, value) => {
    event.stopPropagation();
    alert(value);
}

然后你可以像这样使用它：

<li onClick={event => handleClick(event, 127)}></li>

Answer 2

您必须将event对象放在父级参数列表中并使用它来防止将要发生的事情：

你可以这样做：

onClick={(e) => { e.target === e.currentTarget && alert(127) }

你可以（也可能应该）使用if，这更加冗长但更容易理解：

onClick={(e) => { if (e.target !== e.currentTarget) return; alert(127) }

子元素单击触发父元素 - Reactjs

2 个答案: