Квадратичный Калькулятор Реакции

Question

Я новичок в React и пытаюсь создать простое веб-приложение для квадратичного калькулятора. Для каждой переменной есть три входа: a, b и c. Независимо от того, какие числа я ввел в возвращаемые значения, они всегда равны NaN. Помощь будет высоко ценится. Код:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      a: null,
      b: null,
      c: null
    };

    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange({ target }) {
    this.setState({
      [target.name]: target.value
    });
  }

  publish(a, b, c) {
    document.write((-1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / 
(2 * a) + "<br/>" +
    (-1 * b - Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2 * a));
  }

 render() {
 return( 
<div>
  <input
  type="number"
  name="Var A"
  placeholder="Enter Variable A"
  value={ this.state.a }
  onChange={ this.handleChange }/>

  <input
  type="number"
  name="Var B"
  placeholder="Enter Variable B"
  value={ this.state.b }
  onChange={ this.handleChange }/>

  <input
  type="number"
  name="Var C"
  placeholder="Enter Variable C"
  value={ this.state.c }
  onChange={ this.handleChange }/>

  <button value="Send" onClick={ this.publish }>Publish</button>
</div>
  }
}


export default App;

Answer 1

Вам необходимо правильно сохранить значения каждого входного значения, это можно сделать с помощью setState, но вы должны правильно установить его имя и значение, которое будет соответствовать states:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      a: "",
      b: "",
      c: ""
    };

    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
	console.log('change');
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  publish() {

	  let a = parseFloat (this.state.a), b=parseFloat (this.state.b), c = parseFloat (this.state.c);
		let discriminant = (Math.pow(b, 2) - (4 * a * c));
		if(discriminant > 0){
		const root1 = (-b + Math.sqrt(discriminant)) / (2 * a);
    const root2 = (-b - Math.sqrt(discriminant)) / (2 * a);
		document.write(root1+ "<br/>" +root2);
		}else{
			document.write('Discriminant is less than 0');
		}
	
   
  }

 render() {
 return( 
<div>
  <input
  type="number"
  name="a"
  placeholder="Enter Variable A"
  value={ this.state.a }
  onChange ={ this.handleChange }/>

  <input
  type="number"
  name="b"
  placeholder="Enter Variable B"
  value={ this.state.b }
  onChange ={ this.handleChange }/>

  <input
  type="number"
  name="c"
  placeholder="Enter Variable C"
  value={ this.state.c }
  onChange ={ this.handleChange }/>

  <button value="Send" onClick={ this.publish }>Publish</button>
</div>)
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Кроме того, если дискриминант меньше 0, он выдаст NaN.

Answer 2

Вы устанавливаете переменную в состоянии, но вызываете функцию с неопределенными параметрами.

Попробуйте это:

publish() {
    var a = this.state.a, b=this.state.b, c=this.state.c;
    a = parseInt(a); b=parseInt(b); c = parseInt(c);
    document.write((-1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2 * a) + "<br/>" + (-1 * b - Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2* a));
  }

Answer 3

Проблема в том, что target.name в handleChange не обеспечивает ожидаемое значение. Имя, присвоенное вашему входу: Var a.

handleChange({ target }) { this.setState({ [target.name]: target.value }); }

<input type="number" name="Var A" placeholder="Enter Variable A" value={ this.state.a } onChange={ this.handleChange }/>

Answer 4

В функции публикации вы используете a, b и c, которые передаются в качестве аргументов, но на самом деле вы хотите использовать a, b и c из состояния. Удалить аргумент из публикации Выглядеть как : `` `

  publish(){
             var a = this.state.a;
             var b = this.state.b;
             var c = this.state.c;

            ...


   }

`` ` Также имена входов должны быть a, b и c, а не Var A, Var B и Var C

Это должно решить вашу проблему