React JS中如何将输入框计算得到的结果展示在h1标签内

核心思路是用组件状态持久化存储每次输入后的计算结果，再将状态绑定到h1标签完成页面渲染，不需要改动原有计算逻辑，只需要补充状态更新和渲染绑定的代码即可。

• 如果你用的是React函数组件（目前主流写法），直接用useState声明结果状态即可
• onChange事件里算完结果后，除了原有控制台打印，同步把结果更新到状态里
• 在页面需要展示结果的位置放置h1标签，读取状态值渲染，可加简单的边界处理避免显示NaN、超长浮点数等异常内容

完整可运行代码示例：

import { useState } from 'react';

export default function BtcConvert() {
  // 存储计算结果的状态，初始为空避免无意义的默认值
  const [btcAmount, setBtcAmount] = useState('');
  // 此处coinId按你原有逻辑从接口获取即可，示例值仅作测试用
  const coinId = { price: 67500 };

  return (
    <div>
      <input
        className="input"
        type="number"
        placeholder="$"
        onChange={(evt) => {
          const inputValue = evt.target.value.trim();
          // 输入为空时清空结果，不执行计算
          if (!inputValue) {
            setBtcAmount('');
            return;
          }
          const computeResult = Number(inputValue) / coinId.price;
          // 按需保留小数位数，BTC场景一般保留4-8位即可，避免浮点数溢出显示
          setBtcAmount(computeResult.toFixed(6));
          // 原有控制台打印逻辑可按需保留
          console.log(computeResult);
        }}
      />
      {/* 结果展示h1，空状态显示提示文案 */}
      <h1>{btcAmount || '输入美元金额查看对应BTC数量'}</h1>
    </div>
  );
}

如果你用的是React类组件，逻辑完全一致，只需要把状态声明和更新换成类组件的写法即可，核心参考逻辑：

import React from 'react';

class BtcConvert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btcAmount: ''
    }
    this.coinId = { price: 67500 };
  }

  render() {
    return (
      <div>
        <input
          className="input"
          type="number"
          placeholder="$"
          onChange={(evt) => {
            const inputValue = evt.target.value.trim();
            if (!inputValue) {
              this.setState({ btcAmount: '' });
              return;
            }
            const computeResult = Number(inputValue) / this.coinId.price;
            this.setState({ btcAmount: computeResult.toFixed(6) });
            console.log(computeResult);
          }}
        />
        <h1>{this.state.btcAmount || '输入美元金额查看对应BTC数量'}</h1>
      </div>
    )
  }
}

注意：evt.target.value默认是字符串类型，虽然做除法运算时JS会自动隐式转换为数字，但显式调用Number()转换可以规避很多隐式类型转换导致的异常问题，建议保留。

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