停止从 React 中的 select 组件传播

Question

I have a react app which renders a select element within a button.

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

When the user now tries to select an element from dropdown, the event is propagated to button as well. How can I prevent this?

I've tried following based on other SO posts:

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

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

Code Link:

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

Answer 1

You need to add on click to the select that stop the propagation of the on click event

Therefore add:

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>

Answer 2

Alternative solution: As Sahar Levy rightly suggested, you need onClick for both tags, you can avoid 1 with if condition (ie alert when Button is clicked else do nothing).

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() can be removed. To log event data in console, e.persist() helps to display it without any error.