How to use onChange and onClick event in React JS?
Example
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.state = {
number1: 0,
number2: 0,
result: 0
};
}
handleOnChange = e => {
const { target: { value, name } } = e;
this.setState({
[name]: Number(value)
});
}
handleResult = e => {
this.setState({
result: this.state.number1 + this.state.number2
});
}
render() {
return (
<div className="Calculator">
<input onChange={this.handleOnChange} name="number1" type="text" value={this.state.number1} />
{' + '}
<input onChange={this.handleOnChange} name="number2" type="text" value={this.state.number2} />
<p><button onClick={this.handleResult}>=</button></p>
<p className="result">{this.state.result}</p>
</div>
);
}
}
export default App;
Most Helpful This Week
React JS update Div content on click
Example of React Bootstrap Datatable
Create React App
onClick Event binding and get event name in ReactJs
How to handle events using expressions inside JSX?
React JS Count number of checkboxes are checked
onMouseDown and onMouseUp Event handling in ReactJs
How to create simple React Router to navigate multiple pages?
How to use React-Bootstrap component?
Check checkbox is Checked or Unchecked