React JS中如何实现两个输入框值加减并在第三个输入框显示结果？

你的代码存在几个关键问题，导致计算结果无法显示在第三个输入框中：

• React事件处理写法错误：React的事件属性（比如onKeyUp）不能像原生HTML那样使用字符串形式的函数调用（onkeyup="sum();"），必须传递函数引用，且要保证函数在组件作用域内可访问。
• 直接操作DOM不符合React设计逻辑：React通过状态（state）管理数据，直接用document.getElementById读取/修改DOM值，容易引发数据与视图不同步的问题。
• Add按钮未绑定触发事件：当前Add按钮没有绑定点击事件，无法主动触发求和操作。

修正后的规范代码（采用React状态管理） #

import { useState } from 'react';

export default function App() {
  // 用state管理输入值与计算结果
  const [num1, setNum1] = useState('');
  const [num2, setNum2] = useState('');
  const [result, setResult] = useState('');

  // 求和函数，放在组件内部确保作用域正确
  const sum = () => {
    const val1 = num1 === '' ? 0 : parseInt(num1);
    const val2 = num2 === '' ? 0 : parseInt(num2);
    const total = val1 + val2;
    if (!isNaN(total)) {
      setResult(total.toString());
    }
  };

  // 减法函数示例
  const subtract = () => {
    const val1 = num1 === '' ? 0 : parseInt(num1);
    const val2 = num2 === '' ? 0 : parseInt(num2);
    const total = val1 - val2;
    if (!isNaN(total)) {
      setResult(total.toString());
    }
  };

  return (
    <div className="App">
      <h2>Number 1</h2>
      <input 
        type="text" 
        value={num1} 
        onChange={(e) => setNum1(e.target.value)}
        onKeyUp={sum}
      />
      <h3>Number 2</h3>
      <input 
        type="text" 
        value={num2} 
        onChange={(e) => setNum2(e.target.value)}
        onKeyUp={sum}
      />
      <div></div>
      <button onClick={sum}> Add </button>
      <div></div>
      <button onClick={subtract}> Subtract </button>
      <div></div>
      <input type="text" value={result} readOnly />
    </div>
  );
}

关键修改说明： #

• 使用useState钩子管理数据，确保视图与数据同步。
• 函数定义在组件内部，保证JSX能直接引用。
• 事件处理改为React规范写法：传递函数引用（如onKeyUp={sum}），而非字符串。
• 结果框设置readOnly，避免用户手动修改，保证数据由state统一控制。
• 简化空值处理与类型转换逻辑，代码更简洁易维护。

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