react handle events access dom code example
Example 1: react onclick to make another button
import React from 'react';
const App = () => {
const message = () => {
console.log("Hello World!")
}
return (
<button onClick={message}> Press me to print a message! </button>
);
}
Example 2: 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 <div>Current window width: {this.state.windowWidth}</div>;
}
});
ReactDOM.render(<Box />, mountNode);