React中点击按钮多次渲染指定组件的实现方案及循环用法咨询

完全可以用for循环来渲染多个AddRemoveInputField组件，你之前只渲染一次的问题大概率是状态管理没做好——循环的次数没有和React状态绑定，导致点击按钮后组件没触发重渲染，循环次数始终不变。

实现步骤： #

1. 在父组件中维护状态：用一个状态变量记录要渲染的组件数量，初始值可以设为1（默认显示一组输入框）。
2. 编写添加按钮的点击逻辑：点击时递增状态变量，触发组件重渲染。
3. 用for循环生成组件列表：根据状态变量的值，循环生成对应数量的AddRemoveInputField组件，注意给每个组件加唯一的key。

完整代码示例： #

父组件（负责控制组件数量和处理输入）

import React, { useState } from 'react';
import AddRemoveInputField from './AddRemoveInputField';
import { Button } from 'reactstrap';

export default function ParentComponent() {
  // 维护要渲染的输入字段组数量
  const [fieldCount, setFieldCount] = useState(1);
  // 存储所有输入字段的值
  const [formData, setFormData] = useState([]);

  // 处理输入变化，根据索引更新对应组的数据
  const handleInputChange = (index, e) => {
    const { name, value } = e.target;
    const newFormData = [...formData];
    if (!newFormData[index]) newFormData[index] = {};
    newFormData[index][name] = value;
    setFormData(newFormData);
  };

  // 点击添加按钮，增加字段组数量
  const handleAddField = () => {
    setFieldCount(prevCount => prevCount + 1);
  };

  // 用for循环生成输入字段组
  const renderFields = () => {
    const fields = [];
    for (let i = 0; i < fieldCount; i++) {
      fields.push(
        <AddRemoveInputField 
          key={i} 
          index={i}
          action={(e) => handleInputChange(i, e)} 
        />
      );
    }
    return fields;
  };

  return (
    <div>
      {renderFields()}
      <Button color="primary" onClick={handleAddField} style={{ marginTop: '20px' }}>
        + 添加一组字段
      </Button>
      {/* 可以在这里预览formData，查看输入内容 */}
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
}

修改后的AddRemoveInputField子组件

（注意给每个输入框的name和id加上索引，避免重复，方便区分不同组的输入）

import React from 'react'
import {Form, FormGroup, Label, Input, Col} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function AddRemoveInputField({ index, action }) {
  return (
    <div className='smallHr'>
        <div className="space"></div>
        <div><hr style={{width: '9rem',margin:'auto'}}/></div>
        <div className="space"></div>
        
        <FormGroup row>
          <Label for={`title-${index}`} sm={2} className='bold padding'>
            Title
          </Label>
          <Col sm={10}>
            <Input 
              onChange={action}
              id={`title-${index}`}
              name="title"
              type="text"
            />
          </Col>
        </FormGroup>

        <FormGroup row>
          <Label for={`url-${index}`} sm={2} className='bold padding'>
            URL
          </Label>
          <Col sm={10}>
            <Input 
              onChange={action}
              id={`url-${index}`}
              name="url"
              type="text"
            />
          </Col>
        </FormGroup>
        
        <div className="space"></div>
        
        <FormGroup row>
          <Label for={`discription-${index}`} sm={2} className='bold padding'>
            Discription
          </Label>
          <Col sm={10}>
            <Input
              id={`discription-${index}`}
              name="discription"
              type="textarea" 
              onChange={action}
            />
          </Col>
        </FormGroup>
        
        <div className="space"></div>
        
        <FormGroup row>
          <Label className='bold padding' for={`source-${index}`} sm={2}>
            Source
          </Label>
          <Col sm={10}>
            <Input 
              onChange={action}
              id={`source-${index}`}
              name="source"
              type="text"
            />
          </Col>
        </FormGroup>
    </div>
  )
}

关键注意点： #

• 唯一key：循环渲染组件时必须给每个组件加唯一的key，这里用循环索引i是最简单的方式（如果后续需要删除功能，建议用更稳定的唯一标识，比如UUID）。
• 表单元素的唯一标识：每个输入框的id和name要区分开，避免多个组件的输入框冲突，同时方便在父组件中精准处理对应组的输入数据。
• 状态驱动渲染：所有动态变化的内容（比如组件数量）都要通过React状态控制，这样状态更新时才会触发组件重渲染，循环的次数才会跟着变化。

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