添加两个没有操作按钮的数字 react.js答案

【问题标题】：Add two number without action button react.js添加两个没有操作按钮的数字 react.js
【发布时间】：2019-01-09 12:47:52
【问题描述】：

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）。它应该自动更新第三个输入字段值或带有结果值的文本。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您不必将结果存储在您的状态中，因为您可以根据当前状态计算它：

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>
    );
  );
}

【讨论】：

【解决方案2】：

您可以在更新 num1 或 num2 状态时简单地设置结果状态。

updateNum1(data){
  this.setState({
    num1 : data.target.value,
    result: data.target.value + this.state.num2
  });
}

您也将对 updateNum2 方法执行相同的操作。

或者你可以在你的 jsx 中动态添加它们而不是结果状态。

<h1>Result: {this.state.num1 + this.state.num2}</h1>

而不是

<h1>{this.state.result}</h1>

【讨论】：

@Tarreq 对不起，我不太明白你的意思。
对不起，兄弟，我很困惑，我以为你在使用 this.state，在状态对象本身，我的错 :)

【解决方案3】：

你可以使用：

<h1>{this.state.num1 + this.state.num2 }</h1>

【讨论】：

【解决方案4】：

如果您想保留现有的组件结构，您可以在updateNum1 和updateNum2 中设置状态时添加对updateResult 的调用作为回调。

例如

updateNum1(data){
    this.setState({
        num1 : data.target.value
    }, this.updateResult);
}

updateNum2(data){
    this.setState({
        num2 : data.target.value
    }, this.updateResult);
}

这将在状态更新后调用updateResult

【讨论】：