ReactJS类组件实现两数相加并通过alert弹窗展示结果的方法及NaN问题解决

Hey Darshan，我来帮你搞定这个问题！咱们先拆解一下：首先说怎么正确实现类组件的两数相加弹窗功能，再看看你代码里导致NaN的问题出在哪。

要实现这个功能，核心步骤其实很清晰：

• 初始化组件状态，用来存储两个输入框的内容
• 给输入框绑定onChange事件，实时把用户输入同步到组件状态里
• 编写相加逻辑，处理可能的非数字/空输入情况，避免出现NaN
• 渲染输入框和触发按钮，点击按钮时执行相加并弹窗显示结果

你遇到的NaN问题，主要是两个核心错误导致的：

1. 用错了事件属性：你给input用了onChangeText，但这是React Native的专属属性，Web端的React输入框根本不识别，得用标准的onChange事件。
2. 事件参数处理错误：onChange的回调参数是事件对象，你直接拿Num1当输入值，相当于把一个事件对象传给了setState，后续parseInt的时候自然转不出有效数字，结果就是NaN。

另外还有个小细节：你的按钮没有显示文字，用户很难知道它的功能；而且如果输入为空，parseInt会返回NaN，相加后还是NaN，最好加个默认值处理。

import React, { Component } from 'react';

class Sum extends Component {
  constructor(props) {
    super(props);
    // 把状态变量改成小写开头，更符合JS变量命名规范（可选但推荐）
    this.state = { num1: '', num2: '' };
  }

  // 通用输入处理函数，用name属性对应状态字段，减少重复代码
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  Add = () => {
    // 用Number()转换输入，同时用|| 0处理空值/非数字输入，避免NaN
    const n1 = Number(this.state.num1) || 0;
    const n2 = Number(this.state.num2) || 0;
    const ans = n1 + n2;
    alert(`两数相加结果：${ans}`);
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <input
          type="text"
          name="num1"
          value={this.state.num1}
          onChange={this.handleInputChange}
          placeholder="输入第一个数"
          style={{ marginRight: '10px', padding: '4px' }}
        />
        <input
          type="text"
          name="num2"
          value={this.state.num2}
          onChange={this.handleInputChange}
          placeholder="输入第二个数"
          style={{ marginRight: '10px', padding: '4px' }}
        />
        {/* 给按钮加上文字，用户能直观知道功能 */}
        <button title="Add" onClick={this.Add} style={{ padding: '4px 12px' }}>
          相加
        </button>
      </div>
    );
  }
}

export default Sum;

• 把onChangeText替换成Web React标准的onChange事件，通过e.target.value获取真实的输入内容
• 新增了通用的handleInputChange函数，利用input的name属性对应状态字段，避免写重复的事件处理逻辑
• 用Number() || 0处理输入转换，确保空输入或者非数字输入时默认转成0，彻底避免NaN的出现
• 给输入框加了placeholder、按钮加了文字，还加了简单的内联样式，提升用户体验
• 调整了状态变量的命名（num1/num2），符合JavaScript的小驼峰命名规范

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