React中如何点击按钮逐个添加指定输入字段？

我有一个React函数式组件，用对象存储表单渲染所需的不同值，初始输入值对象及相关处理函数如下：

const initialInputValues = {
  domain: '',
  title1: '',
  title2: '',
  title3: '',
  title4: '',
  title5: '',
  title6: '',
  title7: '',
  description1: '',
  description2: '',
};

const [values, setValues] = useState(initialInputValues);

// 处理输入变更
const handleInputChange = (e) => {
  const { name, value } = e.target;

  setValues({...values, [name]: value });
}

// 处理表单提交
const handleSubmit = (e) => {
  e.preventDefault();
}

我用可复用的FormGroup组件渲染表单字段：

<FormGroup
  label='Domain'
  name='domain'
  type='url'
  value={values.domain}
  onChange={handleInputChange}
/>
<FormGroup
  label='Title 1'
  name='title1'
  value={values.title1}
  onChange={handleInputChange}
/>
<FormGroup
  label='Title 2'
  name='title2'
  value={values.title2}
  onChange={handleInputChange}
/>
<FormGroup
  label='Title 3'
  name='title3'
  value={values.title3}
  onChange={handleInputChange}
/>

在Title字段下方有一个按钮：

<button
  className='button__addField'
  type='button'
  onClick={handleAddTitle}
>
  Add Title
</button>

我希望点击该按钮时逐个添加title4、title5、title6、title7对应的输入字段。除了用useRef结合CSS类显隐字段的方式外，有没有其他可行方案？显隐的方式不适用于未来扩展title到12个、description到8个这类场景。

核心思路是用状态跟踪当前已渲染的字段数量，而非提前定义所有字段再控制显隐，天然适配扩展需求。

步骤1：调整状态定义 #

新增状态activeTitleCount，控制当前显示的title字段数量，初始值设为3（对应title1-title3）：

const initialInputValues = {
  domain: '',
  title1: '',
  title2: '',
  title3: '',
  title4: '',
  title5: '',
  title6: '',
  title7: '',
  description1: '',
  description2: '',
};

const [values, setValues] = useState(initialInputValues);
// 跟踪当前激活的title字段数量
const [activeTitleCount, setActiveTitleCount] = useState(3);

步骤2：实现添加字段逻辑 #

handleAddTitle函数只需在当前数量未达到上限时（可把上限改成常量方便后续扩展），递增计数：

// 可把maxTitleCount抽成全局常量，比如const maxTitleCount = 12;
const handleAddTitle = () => {
  if (activeTitleCount < 7) {
    setActiveTitleCount(prev => prev + 1);
  }
};

步骤3：动态渲染title字段 #

用循环生成对应数量的FormGroup组件，无需手动重复编写：

{Array.from({ length: activeTitleCount }).map((_, index) => {
  const titleNumber = index + 1;
  const fieldName = `title${titleNumber}`;
  return (
    <FormGroup
      key={fieldName}
      label={`Title ${titleNumber}`}
      name={fieldName}
      value={values[fieldName]}
      onChange={handleInputChange}
    />
  );
})}

扩展到description字段的思路 #

如果要实现description字段的动态添加，逻辑完全一致：

1. 新增activeDescCount状态，初始值设为2
2. 实现handleAddDesc函数，控制计数递增到目标数量（比如8）
3. 用循环渲染对应的description字段

方案优势 #

• 高度可扩展：后续要增加title到12个，只需修改上限值，无需改动渲染逻辑
• 代码更简洁：避免重复编写大量FormGroup组件
• 状态管理清晰：用单一计数状态控制渲染，而非维护多个显隐状态

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