React加密货币网站无法获取对应输入框值的问题求助

你遇到的问题核心是用原生DOM全局查询的方式获取输入值，且没有遵循React的状态管理模式：

• document.getElementsByClassName("buyInput")返回的是页面上所有类名为buyInput的元素集合，直接取.value只会拿到第一个元素的值，其他组件的输入框自然取不到。
• React组件是独立实例，每个Coin组件的输入框应该由组件自身维护状态，而非通过全局DOM操作获取。

解决步骤： #

1. 在Coin组件中添加useState维护当前输入框的数值状态
2. 将input的value与状态绑定，通过onChange事件实时更新状态
3. 在buyCoin函数中直接使用状态值，无需再操作DOM

修改后的完整代码：

import React, { useContext, useState } from 'react'
import './Coin.css';
import { Context } from '../src/context/Context'

const Coin = ({
  name,
  price,
  symbol,
  marketcap,
  volume,
  image,
  priceChange
}) => {
  const { user, dispatch } = useContext(Context);
  // 用useState维护当前组件输入框的数值
  const [coinNumber, setCoinNumber] = useState(0);

  // 购买逻辑：检查余额并执行操作
  function buyCoin() {
    const coinPrice = price;
    const wallet = user.wallet;
    // 先判断输入是否为有效数字
    if (isNaN(coinNumber) || coinNumber <= 0) {
      alert("请输入有效的购买数量");
      return false;
    }
    if (coinNumber * coinPrice > wallet) {
      alert("余额不足");
      console.log(coinNumber);
      return false;
    } else {
      console.log(coinNumber);
      alert("购买成功");
      // 这里可添加更新用户钱包/持仓的逻辑，比如触发Context的dispatch
      // dispatch({ type: 'BUY_COIN', payload: { name, amount: coinNumber } })
      return true;
    };
  }

  return (
    <div className='coin-container'>
      <div className='coin-row'>
        <div className='coin'>
          <img src={image} alt='crypto' />
          <h1>{name}</h1>
          <p className='coin-symbol'>{symbol}</p>
        </div>
        <div className='coin-data'>
          <p className='coin-price'>${price}</p>
          <p className='coin-volume'>${volume.toLocaleString()}</p>
          {priceChange < 0 ? (
            <p className='coin-percent red'>{priceChange.toFixed(2)}%</p>
          ) : (
            <p className='coin-percent green'>{priceChange.toFixed(2)}%</p>
          )}
          <p className='coin-marketcap'>
            ${marketcap.toLocaleString()}
          </p>
          {/* 购买按钮 */}
          <button className='buybtn' onClick={buyCoin}>Buy</button>
          {/* 绑定状态与输入框 */}
          <input 
            type="number" 
            className="buyInput"
            value={coinNumber}
            onChange={(e) => setCoinNumber(Number(e.target.value))}
            min="0"
            step="0.000001" // 可根据加密货币精度调整步长
          />
        </div>
      </div>
    </div>
  );
};
export default Coin;

额外说明： #

• 每个Coin组件的coinNumber状态是独立的，不会互相干扰，完美解决多组件输入值获取问题。
• 新增输入合法性判断，避免无效购买操作。
• 简化了price的获取方式，直接使用props传入的值。

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