React中实现数值乘法并在Stok列展示结果的问题

直接上可运行的代码示例，针对你的需求调整了state更新、数值转换和计算逻辑：

import { useState } from 'react';

function StockComponent() {
  // 初始化输入状态
  const [inputs, setInputs] = useState({ pcs: "", lusin: "" });

  // 统一处理输入变更，通过name属性区分字段
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 过滤非数字字符，避免无效输入
    const cleanValue = value.replace(/[^0-9]/g, '');
    setInputs(prevState => ({ ...prevState, [name]: cleanValue }));
  };

  // 计算Stok值，处理空值避免NaN
  const getStokValue = () => {
    // 转换为数字，空值或无效值默认取0
    const pcs = parseInt(inputs.pcs, 10) || 0;
    const lusin = parseInt(inputs.lusin, 10) || 0;
    // 这里按1 lusin=12 pcs的逻辑计算总库存，可根据你的需求修改乘法规则
    return lusin * 12 + pcs;
  };

  return (
    <div className="stock-calculator">
      <div>
        <label>Pcs：</label>
        <input
          type="text"
          name="pcs"
          value={inputs.pcs}
          onChange={handleInputChange}
          placeholder="输入pcs数量"
        />
      </div>
      <div>
        <label>Lusin：</label>
        <input
          type="text"
          name="lusin"
          value={inputs.lusin}
          onChange={handleInputChange}
          placeholder="输入lusin数量"
        />
      </div>
      <div>
        <strong>Stok：</strong>{getStokValue()}
      </div>
    </div>
  );
}

export default StockComponent;

关键问题解决点 #

• 避免NaN的核心处理：
  使用parseInt(inputs.xxx, 10) || 0，当输入为空或非数字时，parseInt返回NaN，通过|| 0将其转为0，确保计算结果始终是有效数字。同时必须指定parseInt的第二个参数10（十进制），避免旧浏览器将以0开头的数字解析为八进制。

• 统一的输入变更处理：
  给每个输入框添加name属性，与state的字段名对应，这样一个handleInputChange函数就能处理所有输入的更新，无需为每个字段单独写函数。同时通过replace(/[^0-9]/g, '')过滤掉非数字字符，从源头避免无效输入。

• 动态计算Stok值：
  单独封装getStokValue函数处理计算逻辑，每次state更新时会自动重新计算并渲染结果，确保Stok列实时展示最新值。如果你的乘法规则不同（比如单纯的lusin乘以某个系数），直接修改函数内的计算公式即可。

可选优化：使用number类型输入框 #

如果希望浏览器直接限制输入为数字，可以将input的type改为number，此时可以去掉字符过滤逻辑，但仍需保留空值处理：

<input
  type="number"
  name="lusin"
  value={inputs.lusin}
  onChange={handleInputChange}
  min="0"
  placeholder="输入lusin数量"
/>

对应的handleInputChange简化为：

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setInputs(prevState => ({ ...prevState, [name]: value }));
};

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