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

How to handle events using expressions inside JSX? Check which Radio button is Selected or Clicked React JS update Div content on click How to build and use a custom react component from scratch? React JSX Glyphicon Rating Star component How to pass properties from parent component to child component in React JS? What is JSX? React Components React JS onClick event handler

Golang Tutorial

Golang Reference

Beego Framework

How to use onChange and onClick event in React JS?

Example

Most Helpful This Week

Most Helpful This Week