reactjs - react 状态不更新onclick

Question

我是 react.js 的菜鸟，正在尝试通过编写一个简单的加法 ap 来学习状态和设置状态。我试图使用状态获取输入的 2 个值，但是当我出于某种原因单击添加按钮时没有得到任何东西。有人可以解释我如何添加这 2 个值以及我做错了什么吗？谢谢 !

import React from 'react'; 
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
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) {
    this.setState({ num1: evt.target.value });
  }





handlenum2Change(evt) {

    this.setState({ num2: evt.target.value });


}


   addAction (event) {

  var num1=this.setState({ num1: event.target.value });
  var num2=this.setState({ num2: event.target.value });



   this.setState({result: num1 + num2 })

            } 


  render() {


     return (


      <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
           <input type="number" ref="term" placeholder="Length of loan"  onChange={this.handlenum2Change}/>


            <input type="button" onClick={this.addAction} value="Add"/>
    <input type='text' value={this.state.result} readonly/>

        </label>

      </form>
    );
  }
}




export default Grade;

Answer 1

您还没有将函数 addAction 绑定(bind)到 this。因此，您必须将其与 this.handlenum1Change = this.handlenum1Change.bind(this); 一起添加。您也可以使用箭头函数来做到这一点。要计算 addAction 中的值，您可以通过执行 var num1 = this.state.num1 而不是 var num2=this.setState({ num2:事件.target.value });。此外，您不应将 setState 调用在一起。 (通过搜索“为什么 setState 是异步的”来阅读它)本质上，您的 addAction 应该看起来像这样:

addAction=()=>{
 this.setState({result: this.state.num1 + this.state.num2 })
}

React 不会在输入中执行 type="number"，您可以找到解决方法 here .

所以你必须做类似的事情

handlenum1Change (evt) {
 console.log(evt.target.value);
 this.setState({ num1: Number(evt.target.value) });
}

使用您的 handlenum1Change 和 handlenum2Change。

而 readOnly 有 O 资本，你的是 readonly。简而言之，一天结束时您的代码应该类似于

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;

我强烈建议您学习一些 ReactJs 类(class)。