javascript - 根据事件多次渲染组件

Question

所以我正在做一个react项目，有一张卡片需要根据用例一次又一次地填写。有时卡只会被填充一次，有时同一张卡必须被填充多次，我如何根据用例使卡组件加载多次。一旦有人开始在第一张卡中输入内容，我希望在已可用的卡组件下方同时加载一个新的卡组件。

我已经创建了带有输入字段的 Card 组件，将其称为 individualVendor，并且在初始加载时仅加载一个组件。还可以添加此类卡以添加更多 vendor 。

这是主要 Beneficiary 组件和名为 individualVendor 的卡容器的代码。

import React, { Component } from 'react';
import BeneficiaryFilter from '../../Commons/Filter/Beneficiary/BeneficiaryFilter';
import AddBeneficiary from './AddBeneficiary/AddBeneficiary';

class Beneficiary extends Component {
   render() {
      return (
         <div className="beneficiary-container">
            <BeneficiaryFilter />
            <div className="main-container">
               <AddBeneficiary />
            </div>
         </div>
      );
   }
}

 export default Beneficiary;


import React, { Component } from 'react';
import IndividualVendor from '../IndividualVendor/InvidualVendor';

class AddBeneficiary extends Component {
   constructor(props) {
      super(props);
      this.state = {

      };
   }


   render() {
      return (
         <div className="add-beneficiary-container">
            <IndividualVendor />
         </div>
      );
   }
}

export default AddBeneficiary;

所以基本上第一个名为 Beneficiary 的组件将加载一个或多个 AddBeneficiary 组件。我需要知道做到这一点的最佳方法是什么？希望这个问题能给您一些背景信息。任何帮助将非常感激，我对编程非常陌生，每天都在努力学习。如果我提到或问的东西太原始，请忽略!!

Answer 1

据我了解，您希望每次在上一张卡中发生点击事件时都能够添加一张卡。然后，您可以在父级中创建一个点击函数，通过 props 将其传递给卡片，并让它们在被点击时调用它。这可能会触发添加另一张卡。

class Beneficiary extends Component {
   this.state = {
      children: 1
   }

   handleClick() {
      this.setState({children: this.state.children + 1});
   }

   render() {
      const { children } = this.state;
      let cards = [];
      for (let i = 0; i < children; i++) {
         cards.push(
            <AddBeneficiary key={i} handleClick={this.handleClick} />
         );
      }

      return (
         <div className="beneficiary-container">
            <BeneficiaryFilter />
            <div className="main-container">
               { cards }
            </div>
         </div>
      );
   }
}

export default Beneficiary;


class AddBeneficiary extends Component {
   render() {
      const { handleClick } = this.props;
      return (
         <div 
            className="add-beneficiary-container"
            onClick={handleClick}
         >
            <IndividualVendor />
         </div>
      );
   }
}

export default AddBeneficiary;