React中如何获取所有输入框值并实现点击计算乘积？

核心思路 #

不用useRef，而是通过统一的状态管理所有输入框的值，点击按钮时遍历这些值计算乘积，再将结果赋值给quantity状态。

具体实现代码 #

import { useState } from 'react';

function ProductCalculator() {
  // 用对象状态统一存储所有输入框的值
  const [inputs, setInputs] = useState({
    num1: '',
    num2: '',
    num3: ''
    // 可根据需求添加更多输入项
  });
  // 存储最终乘积结果的quantity状态
  const [quantity, setQuantity] = useState(0);

  // 通用输入框变化处理函数
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 仅允许输入数字和小数点，过滤非法字符
    const validValue = value.replace(/[^0-9.]/g, '');
    setInputs(prev => ({
      ...prev,
      [name]: validValue
    }));
  };

  // 计算乘积并更新quantity
  const calculateProduct = () => {
    // 将输入值转为数字，过滤无效值（空字符串、非数字）
    const validNumbers = Object.values(inputs)
      .map(val => parseFloat(val))
      .filter(num => !isNaN(num));

    // 无有效数字时重置结果为0
    if (validNumbers.length === 0) {
      setQuantity(0);
      return;
    }

    // 用reduce计算所有有效数字的乘积
    const product = validNumbers.reduce((total, num) => total * num, 1);
    setQuantity(product);
  };

  return (
    <div>
      {/* 输入框需与inputs对象的键一一对应，name属性必须匹配 */}
      <input
        type="text"
        name="num1"
        value={inputs.num1}
        onChange={handleInputChange}
        placeholder="输入数字1"
      />
      <input
        type="text"
        name="num2"
        value={inputs.num2}
        onChange={handleInputChange}
        placeholder="输入数字2"
      />
      <input
        type="text"
        name="num3"
        value={inputs.num3}
        onChange={handleInputChange}
        placeholder="输入数字3"
      />

      <button onClick={calculateProduct}>计算乘积</button>
      <p>乘积结果：{quantity}</p>
    </div>
  );
}

export default ProductCalculator;

关键细节说明 #

• 统一状态管理：用一个对象状态inputs管理所有输入值，避免多个零散的useState，更易维护。
• 输入校验：在handleInputChange中过滤非数字字符，确保输入值都是合法的数字格式。
• 乘积计算逻辑：先把所有输入值转为数字，过滤掉NaN（空字符串转换后的结果），再用reduce累加乘积；如果没有有效数字，将quantity设为0，避免出现NaN结果。

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