React Event

React Event Test

by iwfan

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

#parent, #child {
  padding: 10vw;
  border: 3px solid #ddd;
}

Babel + JSX

class EventTest extends React.Component {
	constructor(props) {
  	super(props)
    this.state = {}
    document.addEventListener('click', evt => {
    	alert('vanilla on document click')
      /* evt.stopImmediatePropagation() */
    }, false)
  }
  
  onParentClick(evt) {
  	alert('React on parent click')
  }
  
  onChildClick(evt) {
  	alert('react on child click')
  }
  render() {
  	return (
    <React.Fragment>
      <div id="parent" onClick={ this.onParentClick }>
        parent
        <div id="child" onClick={ this.onChildClick }> 
          child
        </div>
      </div> 
    </React.Fragment>
    )
  }
	
  componentDidMount() {
  	document.querySelector('#parent').addEventListener("click", evt => {
    	alert('vanilla on parent click')
    }, false)
    document.querySelector('#child').addEventListener("click", evt => {
    	alert('vanilla on child click')
    }, false)
  }

}


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