React.js实现无按钮自动计算两数之和的技术咨询

Hey there! 要实现这个实时自动求和的需求其实很简单，咱们只需要去掉原来的按钮触发逻辑，让输入值变化时直接计算结果就行。我给你两种实用的实现方案，你可以根据自己的习惯选择：

方案一：直接在渲染时计算结果（推荐） #

这种方式不需要把求和结果存在组件状态里，因为它是完全依赖num1和num2的衍生值，这样能减少不必要的状态维护，代码更简洁：

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      num1: 0,
      num2: 0
    };
    this.updateNum1 = this.updateNum1.bind(this);
    this.updateNum2 = this.updateNum2.bind(this);
  }

  updateNum1(data) {
    // 处理空输入，避免出现NaN
    const value = data.target.value ? parseInt(data.target.value, 10) : 0;
    this.setState({ num1: value });
  }

  updateNum2(data) {
    const value = data.target.value ? parseInt(data.target.value, 10) : 0;
    this.setState({ num2: value });
  }

  render() {
    // 实时计算两数之和
    const result = this.state.num1 + this.state.num2;
    return (
      <div>
        <input 
          type="number" 
          value={this.state.num1} 
          onChange={this.updateNum1} 
        />
        <input 
          type="number" 
          value={this.state.num2} 
          onChange={this.updateNum2} 
        />
        <h1>{result}</h1>
      </div>
    );
  }
}

export default App;

关键点说明： #

• 移除了state中的result字段，因为它可以通过num1和num2直接计算得出
• 在更新输入值时，增加了空值判断，避免用户清空输入时结果变成NaN
• 给parseInt加上了第二个参数10（十进制），避免意外的进制解析问题

方案二：将结果存在状态中实时更新 #

如果你更倾向于把求和结果维护在组件状态里，也可以在更新num1或num2时直接计算并更新result：

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      num1: 0,
      num2: 0,
      result: 0
    };
    this.updateNum1 = this.updateNum1.bind(this);
    this.updateNum2 = this.updateNum2.bind(this);
  }

  updateNum1(data) {
    const num1 = data.target.value ? parseInt(data.target.value, 10) : 0;
    // 更新num1的同时直接计算新的结果
    this.setState({ 
      num1,
      result: num1 + this.state.num2 
    });
  }

  updateNum2(data) {
    const num2 = data.target.value ? parseInt(data.target.value, 10) : 0;
    // 更新num2的同时直接计算新的结果
    this.setState({ 
      num2,
      result: this.state.num1 + num2 
    });
  }

  render() {
    return (
      <div>
        <input 
          type="number" 
          value={this.state.num1} 
          onChange={this.updateNum1} 
        />
        <input 
          type="number" 
          value={this.state.num2} 
          onChange={this.updateNum2} 
        />
        <h1>{this.state.result}</h1>
      </div>
    );
  }
}

export default App;

关键点说明： #

• 每次更新输入值时，同步计算并更新result状态
• 同样做了空值处理和十进制解析的优化，保证结果的正确性

两种方案都能实现你要的实时求和效果，方案一更符合React的状态管理最佳实践，因为衍生状态不需要单独存储~

内容的提问来源于stack exchange，提问作者Ryuk