import React, { Component } from 'react';
class App extends React.Component{
constructor(){
super();
this.state ={
num1 : 0,
num2 : 0,
result :0,
}
this.updateNum1=this.updateNum1.bind(this);
this.updateNum2=this.updateNum2.bind(this);
this.updateResult=this.updateResult.bind(this);
};
updateNum1(data){
this.setState({
num1 : data.target.value
});
}
updateNum2(data){
this.setState({
num2 : data.target.value
});
}
updateResult(){
this.setState({
result : parseInt(this.state.num1)+parseInt(this.state.num2)
});
}
render(){
return(
<div>
<input type ="number" value={this.state.num1}
onChange = {this.updateNum1} />
<input type ="number" value={this.state.num2}
onChange = {this.updateNum2} />
{/* <button onClick ={this.updateResult} >Add</button>
*/}
<h1>{this.state.result}</h1>
</div>
);
}
}
export default App;
//添加两个数字,无需操作按钮// 我想在不使用按钮的情况下添加两个数字 1
我正在尝试通过在输入字段中采用默认值来添加两个数字。如何在没有“添加”按钮的情况下添加这两个数字。例如,如果用户将 num1 值从 0 更改为 4,则应更新该值,添加数字 4 值(num1= 4 + num2 =0 = 结果 4)。它应该自动更新第三个输入字段值或其中包含结果值的文本。
最佳答案
您不必将结果存储在您所在的州,因为您可以根据当前的州计算结果:
class App extends React.Component {
constructor() {
super();
this.state ={
num1 : 0,
num2 : 0,
}
}
updateNum1(event) {
this.setState({
num1: event.target.value
});
}
updateNum2(event){
this.setState({
num2: event.target.value
});
}
render() {
const { num1, num2 } = this.state;
const total = parseInt(num1) + parseInt(num2);
return (
<div>
<input
type='number'
value={num1}
onChange={this.updateNum1.bind(this)}
/>
<input
type='number'
value={num2}
onChange={this.updateNum2.bind(this)}
/>
<h1>{total}</h1>
</div>
);
);
}
关于javascript - 添加两个没有操作按钮的数字react.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54110528/