onclick handler 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 (
<button onClick={this.sayHello}>
Click me!
</button>
);
}
export default App;
Example 2: onclick react
function ActionLink() {
function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }
return (
<a href="#" onClick={handleClick}> Click me
</a>
);
}
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: handleClick react
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); }
render() {
return (
<button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
Example 5: handling event in jsx
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
Example 6: react why onclick property function trigger without click
change:
<button type="button" onClick={this.myFunction(argument)}> myButton </button>
to this:
<button type="button" onClick={this.myFunction.bind(this, argument)}> myButton </button>