React动态渲染：按钮点击多次添加表单组件的实现指南

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

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

      <FormGroup row>
        <Label for="urlInput" sm={2} className='bold padding'>URL</Label>
        <Col sm={10}>
          <Input onChange={props.onInputChange} id="urlInput" name="url" type="text" />
        </Col>
      </FormGroup>

      <FormGroup row>
        <Label for="descriptionInput" sm={2} className='bold padding'>Description</Label>
        <Col sm={10}>
          <Input id="descriptionInput" name="description" type="textarea" onChange={props.onInputChange} />
        </Col>
      </FormGroup>

      <FormGroup row>
        <Label className='bold padding' for="sourceInput" sm={2}>Source</Label>
        <Col sm={10}>
          <Input onChange={props.onInputChange} id="sourceInput" name="source" type="text" />
        </Col>
      </FormGroup>
    </div>
  );
}

import React, { useState } from 'react';
import AddRemoveInputField from './AddRemoveInputField'; // 假设子组件在同一目录下

function ParentComponent() {
  // 定义状态，用于追踪要渲染的输入框组数量，初始为0
  const [inputGroupCount, setInputGroupCount] = useState(0);

  // 按钮点击事件处理函数：增加计数器
  const handleAddInputGroup = () => {
    setInputGroupCount(prevCount => prevCount + 1);
  };

  // 假设你需要处理这些动态输入框的值
  const handleInputChange = (e, index) => {
    // 这里可以根据index和e.target.name来更新父组件中的数据状态
    console.log(`Input at index ${index}, name: ${e.target.name}, value: ${e.target.value}`);
    // 示例：如果你有一个数组来存储每个输入组的数据
    // const newFormData = [...formData];
    // newFormData[index][e.target.name] = e.target.value;
    // setFormData(newFormData);
  };

  return (
    <div>
      <h1>动态添加表单组件示例</h1>
      <button onClick={handleAddInputGroup}>添加输入框组</button>

      {/* 根据inputGroupCount的值动态渲染AddRemoveInputField组件 */}
      {Array(inputGroupCount).fill(0).map((_, index) => (
        <AddRemoveInputField key={index} onInputChange={(e) => handleInputChange(e, index)} />
      ))}
    </div>
  );
}

export default ParentComponent;