Question

我是React的新手，我正在尝试构建一个简单的二次计算器Web应用程序。每个变量有三个输入，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

在发布函数中，您使用的是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

这应该可以解决您的问题

Answer 2

您正在将变量设置为state，但调用具有未定义参数的函数。

试试这个：

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

问题是First loop: Second loop: 1 2 3中的target.name未提供预期值。分配给您输入的名称为handleChange。

Var a

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

Answer 4

您需要正确保存每个输入值的值，这可以使用setState来完成，但您必须正确设置其名称和值以匹配states：

＆＃13;

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"))

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

此外，如果判别式小于0，则输出NaN。

反应二次计算器

4 个答案: