React中根据输入值动态渲染表单字段的正确实现方法

你的代码存在几个关键问题导致无法正常工作，下面是修正后的版本和问题说明：

核心问题分析 #

• 输入框的event.target.value是字符串类型，直接赋值给playersQuantity后，数字类型被转为字符串，而且数字本身没有map方法，无法遍历生成输入框。
• React中DOM元素的类名要使用className，而非原生HTML的class，避免和JavaScript的class关键字冲突。
• 未处理输入非有效数字（比如负数、0）的情况，可能引发渲染错误。

修正后的代码 #

function PrimaryInputs() {
  const [playersQuantity, setPlayersQuantity] = useState(0);

  function handleChange(event) {
    // 把输入值转为数字，确保是正整数，非有效数字或负数则设为0
    const num = parseInt(event.target.value, 10);
    setPlayersQuantity(isNaN(num) || num < 0 ? 0 : num);
  }

  return (
    <>
      <div className="input_wrapper">
        <label htmlFor="players">How many players</label>
        <input
          type="number"
          name="players"
          id="players"
          onChange={handleChange}
          min="0" // 限制输入最小值为0
        />
        <div id="playersList">
          {/* 生成对应长度的数组来遍历渲染输入框 */}
          {Array.from({ length: playersQuantity }, (_, index) => (
            <div key={index} className="playersBlock">
              <input
                type="number"
                placeholder="cups"
                className="plCup"
              />
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

关键修改说明 #

1. 类型转换与边界处理：在handleChange里把输入值转为整数，同时判断是否为有效数字，非有效数字或负数时设为0，避免后续渲染出错。
2. 数组生成方式：用Array.from({ length: playersQuantity })生成指定长度的空数组，这样就能用map遍历生成对应数量的输入框。
3. key属性：遍历渲染列表时必须添加唯一的key属性，这里用索引index作为key（如果后续有更唯一的标识可以替换）。
4. className替换class：把所有class改为React规范的className。
5. 输入限制：给数量输入框添加min="0"，防止用户输入负数。

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