如何在React.js中实现动态生成多个输入字段？

原原生JS代码通过手动操作DOM创建输入元素，React中我们可以利用状态驱动UI的特性实现，无需直接操作DOM，代码更简洁可维护。

基础实现（固定数量） #

对应原代码固定生成3个输入框的需求，实现如下：

import { useState } from 'react';

function DynamicInputs() {
  // 初始化输入框数量为3，和原代码的option值一致
  const [inputCount, setInputCount] = useState(3);

  return (
    <div id="options-container">
      {/* 生成对应数量的输入框 */}
      {Array.from({ length: inputCount }).map((_, index) => (
        <input
          key={index}
          type="text"
          placeholder={`Input ${index + 1}`}
        />
      ))}
    </div>
  );
}

export default DynamicInputs;

关键说明 #

• 用useState钩子管理输入框的数量，替代原代码中的固定变量option
• 通过Array.from({ length: inputCount })创建指定长度的数组，再通过map遍历数组生成每个输入元素
• 每个React元素必须设置唯一的key属性，这里使用数组索引作为key（简单场景下足够，复杂场景建议用唯一标识）
• React会根据inputCount的变化自动更新UI，无需手动调用DOM操作方法

增强版（支持动态调整数量） #

如果需要让用户自定义输入字段的数量，可以添加控制输入框实现动态调整：

import { useState } from 'react';

function DynamicInputs() {
  const [inputCount, setInputCount] = useState(3);

  return (
    <div>
      <div>
        <label>设置输入字段数量：</label>
        <input
          type="number"
          value={inputCount}
          onChange={(e) => setInputCount(Number(e.target.value))}
          min="1"
        />
      </div>
      <div id="options-container">
        {Array.from({ length: inputCount }).map((_, index) => (
          <input
            key={index}
            type="text"
            placeholder={`Input ${index + 1}`}
          />
        ))}
      </div>
    </div>
  );
}

export default DynamicInputs;

这个版本中，用户可以通过数字输入框实时调整生成的输入字段数量，React会自动同步更新UI。

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