how to use an event listener in a react js component

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);

Posted by: Guest on June-20-2020

Source

// 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 ( <div className="App"> <input type="text" name="input" id="" placeholder="" onChange={this.handleChange}/> </div> ); } } export default App;

class Button extends React.Component { scream() { alert('AAAAAAAAHHH!!!!!'); } render() { return <button onClick={this.scream}>AAAAAH!</button>; } } ReactDOM.render(<Button />, document.getElementById('app'));

Code answers related to "how to use an event listener in a react js component"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "how to use an event listener in a react js component"

Code answers related to "how to use an event listener in a react js component"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us