event listener react code example

Example 1: react button onclick

import React, { Component } from 'react';

class App extends Component {
  
  constructor(props) {
    super(props);
    this.sayHello = this.sayHello.bind(this);
  }

  sayHello() {
    alert('Hello!');
  }
  
  return (
    
      Click me!
    
  );
}

export default App;

Example 2: react onclick to make another button

import React from 'react';

const App = () => {
  
const message = () => {
 console.log("Hello World!") 
}

return (
 Press me to print a message! 
  );
}

Example 3: onclick react

function ActionLink() {
  function handleClick(e) {    e.preventDefault();    console.log('The link was clicked.');  }
  return (
          Click me
    
  );
}

Example 4: react button onclick

import React from 'react';

function App() {

  function sayHello() {
    alert('Hello!');
  }
  
  return (
    
      Click me!
    
  );
}

export default App;

Example 5: handling event in jsx

//Event hadling in react
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    
      Click me
    
  );
}

Example 6: 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);