反应如何忽略子元素的onClick

Question

我在父组件中有一个子组件。我想在我点击父级内部的任何地方时发出警报消息，除非点击子级。

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      <div className="parent" onClick={() => alert('x')}>
        <p>Alert clicks anywhere on this div</p>
        <div className="children">
          <button>Do not alert On this element click</button>
        </div>
        <p>Alert clicks anywhere on this div</p>
      </div>
    )
  }
}

代码示例在这里：

http://jsfiddle.net/rgL5f9yh/

Answer 1

将 e.stopPropagation() 添加到子 onClick 属性

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      <div className="parent" onClick={() => alert('x')}>
        <p>Alert clicks anywhere on this div</p>
        <div onClick={(e) => e.stopPropagation()} className="children">
          <button>Do not alert On this element click</button>
        </div>
        <p>Alert clicks anywhere on this div</p>
      </div>
    )
  }
}

Answer 2

您可以防止子元素中的事件传播，即

<button onClick={((e) => e.stopPropagation())}>Do not alert On this element click</button>