Как на React сложить два числа?

Question

[sda9sd8af8]

На JS это будет так, а как на реакте?

evaluate.onclick = function() {
var first = document.getElementById('inp_1').value;//первое число

var second = document.getElementById('inp_2').value;//второе число

if(isNaN(first) == false && isNaN(second) == false //условие проверки ввода числа
&& first != "" && second != ""){

var res = Number(first) + Number(second);//
document.getElementById('fg').value = res;//

}else{

alert("введите число");//

}

}

Comments

[Сергей Горностаев]

React - это и есть JS.

[sda9sd8af8]

Сергей Горностаев, ну и как переписать этот код в Реакт?

Answer 1

[Леонид Шишкин]

function App() {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [total, setTotal] = useState(number1 + number2);

  function calculateTotal() {
    setTotal(number1 + number2);
  }

  return (
    <div className="App">
      <h1>Adding Two Numbers</h1>

      <div className="number-inputs">
        <input
          type="number"
          value={number1}
          onChange={e => setNumber1(+e.target.value)}
          placeholder="0"
        />
        <input
          type="number"
          value={number2}
          onChange={e => setNumber2(+e.target.value)}
          placeholder="0"
        />
      </div>

      <button onClick={calculateTotal}>Add Them!</button>

      <h2>{total}</h2>
    </div>
  );
}

https://codesandbox.io/s/64800qwkw3

Answer 2

[Михаил Васильев]

import React from 'react';
import ReactDOM from 'react-dom';

class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };
    this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }
  handlenum1Change (evt) {
    console.log(evt.target.value);
    this.setState({ num1: Number(evt.target.value) });
  }
  handlenum2Change(evt) {
    console.log(typeof evt.target.value);
    this.setState({ num2: Number(evt.target.value) });
  }
  addAction =(event)=> {
    let x = this.state.num1 + this.state.num2
    this.setState({result: x })
  }
render() {
 return (
    <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
          <input type="number"   onChange={this.handlenum2Change}/>
          <input type="button" onClick={this.addAction} value="Add"/>
          <input type='text' value={this.state.result} readOnly/>
        </label>
      </form>
    );
  }
}




export default Grade;

Comments

[sda9sd8af8]

а почему на реакте, код больше чем на чистом JS?))

[Даша Циклаури]

sda9sd8af8, потому что Реакт придумывался не для задач сложения чисел, а для более емких и комплексных