Reactjs 添加两个不带操作按钮的数字react.js（自动更新）

我试图通过在输入字段中取默认值（num1=2，num2=2）来添加两个数字。没有“添加”按钮，如何添加这两个数字。例如，如果用户将num1的值从2更改为4，则应更新加上数字2的值（num1=4+num2=2=result 6）。它应该自动更新第三个输入字段值或包含结果值的文本

import React from "react";
import ReactDOM from "react-dom";

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 2,
      num2: 2
    };

    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>
          <input
            type="number"
            name="num1"
            value={this.state.num1}
            onChange={this.handlenum1Change}
          />
          <input
            type="number"
            name="num2"
            value={this.state.num2}
            onChange={this.handlenum2Change}
          />
          <input type="button" onClick={this.addAction} value="Add" />
          <input type="text" value={this.state.result} readOnly />
        </label>
      </form>
    );
  }
}

export default Test;

从“React”导入React；
从“react dom”导入react dom；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
结果:0,，
num1:2，
num2:2
};
this.handlenum1Change=this.handlenum1Change.bind（this）；
this.handlenum2Change=this.handlenum2Change.bind（this）；
}
手柄1更换（evt）{
日志（evt.target.value）；
this.setState（{num1:Number（evt.target.value）}）；
}
Handlenum2变更（evt）{
log（evt.target.value的类型）；
this.setState（{num2:Number（evt.target.value）}）；
}
addAction=事件=>{
设x=this.state.num1+this.state.num2；
this.setState（{result:x}）；
};
render（）{
返回(
);
}
}
导出默认测试；

您可以将更改的值与未更改的值相加，并在更新任何一个数字时使其成为新的

结果

示例


类测试扩展了React.Component{
状态={
结果:4,，
num1:2，
num2:2
};
handlenum1Change=evt=>{
常量num1=编号（evt.target.value）；
this.setState（prevState=>({
num1，
结果：num1+prevState.num2
}));
};
handlenum2Change=evt=>{
const num2=编号（evt.target.value）；
this.setState（prevState=>({
num2，
结果：prevState.num1+num2
}));
};
render（）{
返回(
);
}
}
render（，document.getElementById（“根”））