eventlistener in react code example

Example 1: event listener in react

var Box = React.createClass({
  getInitialState: function() {
    return {windowWidth: window.innerWidth};
  },

  handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth});
  },

  componentDidMount: function() {
    window.addEventListener('resize', this.handleResize);
  },

  componentWillUnmount: function() {
    window.removeEventListener('resize', this.handleResize);
  },

  render: function() {
    return 
Current window width: {this.state.windowWidth}
; } }); ReactDOM.render(, mountNode);

Example 2: react event listener

// it a component
import React from 'react';

class App extends React.Component {
      //call function (ECMAScript 5) from tag input:text
  handleChange = e => {
    //
    console.log(`${e.target.value}`)
  }
  render() { 
    return (
      
); } } export default App;

Example 3: react event listener

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Tags:

Misc Example