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