使用React和JavaScript构建简易计算器，加法函数显示NaN问题求助

你的代码出现NaN的核心问题有两个：

• 你把id="num1"和id="num2"加在了InputGroup组件上，而非实际接收输入的Form.Control上。InputGroup是容器组件，没有value属性，所以document.getElementById("num1").value会得到undefined，parseInt(undefined)的结果就是NaN，两个NaN相加自然还是NaN。
• 结果容器的id是res，但你代码里用document.getElementById("result")去获取，根本找不到这个元素，就算前面的数值正确，结果也无法显示。

另外，React开发中不建议直接通过document.getElementById操作DOM，更符合React范式的做法是使用**状态（state）**来管理输入值和计算结果。

方案1：修正DOM操作的错误（快速临时修复） #

调整id的位置，把id加到Form.Control上，同时修正结果容器的id匹配：

import { Form, InputGroup, Button } from "react-bootstrap";

export default function About() {
  function add() {
    let n1 = parseInt(document.getElementById("num1").value);
    let n2 = parseInt(document.getElementById("num2").value);
    // 处理空输入或非数字的情况，避免NaN
    n1 = isNaN(n1) ? 0 : n1;
    n2 = isNaN(n2) ? 0 : n2;
    document.getElementById("result").innerHTML = n1 + n2;
  }

  return (
    <>
      <h2>addition function</h2>
      <div className="row">
        <div className="col-6">
          <InputGroup className="mb-3">
            {/* 把id移到Form.Control上 */}
            <Form.Control id="num1" placeholder="number1" />
          </InputGroup>
        </div>
        <div className="col-6">
          <InputGroup className="mb-3">
            <Form.Control id="num2" placeholder="number2" />
          </InputGroup>
        </div>
        <div className="col-6">
          <InputGroup className="mb-3">
            {/* 把id改成result，和代码里的选择器匹配 */}
            <Form.Control id="result" placeholder="answer" readOnly />
          </InputGroup>
        </div>
        <Button variant="dark" onClick={add}>Add</Button>
      </div>
    </>
  );
}

方案2：使用React State（推荐的标准写法） #

利用React的useState钩子管理输入和结果，完全避免DOM操作：

import { useState } from "react";
import { Form, InputGroup, Button } from "react-bootstrap";

export default function About() {
  // 定义状态管理输入值和结果
  const [num1, setNum1] = useState("");
  const [num2, setNum2] = useState("");
  const [result, setResult] = useState("");

  const add = () => {
    // 转换为数字，空值或非数字转为0
    const n1 = parseInt(num1) || 0;
    const n2 = parseInt(num2) || 0;
    setResult(n1 + n2);
  };

  return (
    <>
      <h2>addition function</h2>
      <div className="row">
        <div className="col-6">
          <InputGroup className="mb-3">
            <Form.Control
              placeholder="number1"
              value={num1}
              onChange={(e) => setNum1(e.target.value)}
            />
          </InputGroup>
        </div>
        <div className="col-6">
          <InputGroup className="mb-3">
            <Form.Control
              placeholder="number2"
              value={num2}
              onChange={(e) => setNum2(e.target.value)}
            />
          </InputGroup>
        </div>
        <div className="col-6">
          <InputGroup className="mb-3">
            <Form.Control
              placeholder="answer"
              value={result}
              readOnly
            />
          </InputGroup>
        </div>
        <Button variant="dark" onClick={add}>Add</Button>
      </div>
    </>
  );
}

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