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

【问题标题】：Stop propagation from select component in React停止从 React 中的选择组件传播
【发布时间】：2021-04-27 17:55:49
【问题描述】：

我有一个反应应用程序，它在按钮内呈现一个选择元素。

      <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>

当用户现在尝试从下拉列表中选择一个元素时，该事件也会传播到按钮。我怎样才能防止这种情况发生？

我已尝试根据其他 SO 帖子进行以下操作：


const stopPropagation = (e) => {
  e.nativeEvent.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();
};

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

代码链接：

https://codesandbox.io/s/stop-propagation-in-select-m9f8d?file=/ButtonDropdown.js

【问题讨论】：

你试过e.stopPropagation()吗？
请注意，按钮不应该有交互式后代stackoverflow.com/a/26994845/691711
@AndyRay ：我在 onChange 中进行了 stopPropagation，而我应该在 onClick 上进行选择。建议从下面的 sahar 回答。

标签： javascript html reactjs

【解决方案1】：

您需要将点击添加到停止点击事件传播的选择

因此添加：

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>

【讨论】：

谢谢。这行得通。我没有意识到我需要使用 onclick 来停止传播。

【解决方案2】：

替代解决方案：正如 Sahar Levy 正确建议的那样，两个标签都需要 onClick，您可以在 if 条件下避免 1（即，单击按钮时发出警报，否则什么也不做）。

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

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

PS：e.persist() 可以删除。要在控制台中记录事件数据，e.persist() 有助于显示它而不会出现任何错误。

【讨论】：