React简易计算器代码报错求修复：输入值计算显示异常

错误原因 #

• DOM查询时机错误：在组件还未渲染时就执行document.querySelector，此时DOM节点尚未挂载，导致spanResult、inputOne、inputTwo均为null，点击按钮调用add函数时会触发Cannot read properties of null错误。
• 数值计算逻辑错误：inputOneValue + inputTwoValue是字符串拼接操作，后续转Number会得到拼接后的结果（比如输入1和2会得到"12"转成12，而非预期的3），不符合加法需求。
• 不符合React开发模式：直接操作DOM修改spanResult.innerHTML，违背了React通过状态更新驱动视图的设计理念。

修复方案 #

改用React的useState钩子管理输入值和计算结果，通过状态更新自动渲染视图，避免直接操作DOM：

修复后的calc.js代码 #

import React, { useState } from 'react'

export default function Calc() {
    // 用状态管理输入值与计算结果
    const [inputOne, setInputOne] = useState(0);
    const [inputTwo, setInputTwo] = useState(0);
    const [result, setResult] = useState(0);

    const add = () => {
        // 将输入值转为数字后执行加法运算
        const finalResult = Number(inputOne) + Number(inputTwo);
        setResult(finalResult);
    }

    return (
        <div>
            <h1>Simple calculator</h1>
            <label>enter number one:</label>
            <input 
                className='input-one' 
                type="number" 
                value={inputOne}
                onChange={(e) => setInputOne(e.target.value)} 
            /> <br />
            <label>enter second number:</label>
            <input 
                type="number" 
                className='input-two' 
                value={inputTwo}
                onChange={(e) => setInputTwo(e.target.value)} 
            /> <br />
            <button onClick={add} className='btn-result'> See result</button>
            <h2>The result is: <span className='span-result'>{result}</span></h2>
        </div>
    )
}

修复说明 #

• 用useState声明状态变量，分别存储两个输入框的值和计算结果；
• 输入框通过value绑定对应状态，onChange事件实时更新状态值；
• add函数基于状态值完成加法运算，通过setResult更新结果状态后，React会自动重新渲染视图；
• 全程遵循React数据驱动的开发模式，彻底解决原代码中的DOM操作错误与计算逻辑错误。

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