时间戳

首页 > 解决方案 > 反应状态不更新onclick

reactjs - 反应状态不更新onclick

问题描述

我是 react.js 中的菜鸟，我正在尝试通过编写一个简单的加法应用程序来学习状态和设置状态。我试图使用 state 获取输入的 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;

标签： reactjs

解决方案

您尚未将函数绑定addAction到this. 因此，您必须将其与this.handlenum1Change = this.handlenum1Change.bind(this);. 您也可以使用箭头函数来做到这一点。要计算其中的值，addAction您可以通过 dovar num1 = this.state.num1和 not访问状态var num2=this.setState({ num2: event.target.value });。你也不应该打电话给setStateclose togehter。（通过搜索“为什么setState是异步的”来阅读它）本质上，你addAction应该看起来像这样：

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

React 在输入中不起作用，您可以在此处type="number"找到解决方法。

所以你必须做类似的事情

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 课程。

推荐阅读