React数组map中不使用useState或DOM获取input实时更新值的方法

• React事件绑定逻辑错误：原代码onChange={calcSubTotal(Number(3))}的写法会在组件渲染阶段直接执行calcSubTotal函数，传入固定值3，根本不会监听用户的输入动作，计算逻辑完全无法随输入实时更新。
• DOM读取时机错误：在组件渲染流程中（JSX还未挂载到真实DOM时）就通过DOM查询方法读取input值，此时对应元素还未插入DOM树，自然返回null触发报错。
• HTML规范隐患：列表渲染时给多个元素绑定了重复的id（amountInputField、subTotal等），会导致DOM选择器匹配错位，计算结果显示错误。

核心逻辑完全贴合需求约束：

• 不使用useState Hook：所有数值计算都在输入事件触发时实时完成，不需要额外维护组件状态
• 不手动操作DOM读取input值：利用React onChange合成事件自带的事件对象获取值，回调触发时会自动传入当前激活的input元素引用，整个过程不需要手动写DOM查询逻辑，且事件触发时DOM已完成挂载，从根源上避免null读取问题
• 实时更新显示：计算完成后直接在事件回调中更新对应结果节点的文本内容，不需要触发React重渲染流程

disCoins.map((c) => {
    return(
        <div key={c.id} className="calcElement">
            <img className="coinImg" src={c.image} alt="Coin img"></img>
            <div className="calcInfo">
                <div className="calcName">{c.name}<span className="calcSymbol">  ({capitalize(c.symbol)})</span></div>
                <div className="calcPrice">
                    ${formatNumber(c.current_price)}
                    <span 
                      className={`calcChange ${c.price_change_percentage_24h < 0 ? "loss" : "gain"}`}
                    >
                       ({c.price_change_percentage_24h}%)
                    </span>
                </div>
            </div>
            <div className="x">
                <span>×</span>
            </div>
            <div className="amountInput">
                <form>
                    <input 
                      type="number" 
                      placeholder="Amount of Crypto Owned" 
                      defaultValue={0}
                      onChange={(e) => {
                          // 从事件对象直接获取input值，无手动DOM查询
                          const inputAmount = Number(e.target.value) || 0;
                          const currentSubTotal = Number(c.current_price) * inputAmount;
                          // 定位当前行的结果显示节点并更新
                          const currentRow = e.target.closest('.calcElement');
                          const subTotalNode = currentRow.querySelector('.subTotal');
                          subTotalNode.textContent = `$${formatNumber(currentSubTotal)}`;
                      }}
                    ></input>
                </form>
            </div>
            <div className="eq">
                <span>=</span>
            </div>
            <div className="subTot">
                <span className="subTotal">$0</span>
            </div>
        </div>
    )
})

• 完全规避null报错：所有DOM读取操作都在用户实际输入触发事件时执行，此时对应模块已经完全挂载到DOM树中，不会出现渲染阶段元素未就绪的问题
• 多列表单无错位：将原代码中重复的id属性替换为class属性，配合closest方法定位当前行的结果节点，不会出现多个列表项的计算结果串位的问题
• 符合约束要求：全程未使用useState Hook，也没有通过手动DOM查询的方式读取input值，所有取值都来自React事件系统提供的原生引用

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