React: предотвращение триггера события родителя с ребенка

У меня есть этот сценарий, где при нажатии родительского элемента, он переворачивается, чтобы показать дочерний элемент с другими цветами. К сожалению, когда пользователь нажимает на один из цветов, также запускается событие "click" на родительском элементе.

Как остановить триггер события на родительском элементе, когда на ребенка нажимают кнопку?

Возможные решения меня интересуют:

CSS?
Добавьте класс pointer-events : none к родительскому элементу при щелчке дочернего элемента. Тем не менее, это будет означать, что родитель должен будет быть очищен от класса pointer-events позже.
Использование Ref?
Запишите ref родительского элемента React & при нажатии на ребенка, сравните event.target с реф? Мне это не нравится, потому что мне не нравится глобальный ref.

Мысли и лучшее решение будет высоко ценится. Вопрос в том: Как я могу остановить триггер события на родительском элементе при нажатии на ребенка?

Ответ 1

Вы можете использовать stopPropagation

stopPropagation - предотвращает дальнейшее распространение текущего события в фазе барботажа

var App = React.createClass({
  handleParentClick: function (e) { 
    console.log('parent');
  },

  handleChildClick: function (e) {
    e.stopPropagation();
    console.log('child');
  },

  render: function() {
    return <div>
      <p onClick={this.handleParentClick}>
        <span onClick={this.handleChildClick}>Click</span>
      </p>
    </div>;
  }
});

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Ответ 2

Я хотел вызвать функцию на подпорках, но в то же время хотел остановить распространение события от потомка к родителю, вот как он обрабатывается

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;