gpt4 book ai didi

reactjs - react 状态不更新onclick

转载 作者:行者123 更新时间:2023-12-02 00:34:07 25 4
gpt4 key购买 nike

我是 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;

最佳答案

您还没有将函数 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) });
}

使用您的 handlenum1Changehandlenum2Change

readOnlyO 资本,你的是 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)。

关于reactjs - react 状态不更新onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50479358/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com