Javascript 停止从React中的选择组件传播

我有一个react应用程序，它在一个按钮中呈现一个select元素

      <button onClick={this.handleButtonClick}>
        <select value={this.state.value} onChange={this.onChange} >
          <option key={1} value={1}> {"One"} </option>
          <option key={2} value={2}> {"Two"} </option>
        </select>
        "More Text in button, which click should show alert"
      </button>

代码链接：

---

您需要将on click添加到停止on click事件传播的选择中

因此，增加：

onClick = (e) => {
  e.stopPropagation();
};

{“一”}
{“两个”}
“按钮中的更多文本，单击该按钮应显示警报”

替代解决方案：正如Sahar Levy正确建议的那样，两个标签都需要

onClick

，您可以避免if条件下的1（即当单击按钮时发出警报，否则什么都不做）

---

PS:

e.persist（）

可以删除。要在控制台中记录事件数据，

e.persist（）

有助于毫无错误地显示它。

您是否尝试过

e.stopPropagation（）

？请注意，按钮不应该具有交互式子体@AndyRay：我在

onChange

中执行stopPropagation，而我应该在

onClick

中执行select。下面是萨哈尔的建议答案。谢谢。这起作用了。我没有意识到我需要使用onclick来停止传播。

onClick = (e) => {
  e.stopPropagation();
};

<button onClick={this.handleButtonClick}>
    <select onClick={this.onClick} value={this.state.value} onChange={this.onChange} >
       <option key={1} value={1}> {"One"} </option>
       <option key={2} value={2}> {"Two"} </option>
    </select>
    "More Text in button, which click should show alert"
</button>

onChange = (e) => {
    e.persist();
    this.setState({ value: e.target.value });
};

handleButtonClick = (e) => {
    e.persist();
    if (e.target.tagName === "BUTTON") {
        alert("Button clicked");
    }
};