react event binding code example
Example 1: react bind function to component
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
Example 2: react button example
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.sayHello = this.sayHello.bind(this);
}
sayHello() {
alert('Hello!');
}
return (
<button onClick={this.sayHello}>
Click me!
</button>
);
}
export default App;
Example 3: react button onclick
import React from 'react';
function App() {
function sayHello() {
alert('Hello!');
}
return (
<button onClick={sayHello}>
Click me!
</button>
);
}
export default App;
Example 4: handling event in jsx
//Event hadling in react
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}