Question

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

我已经在Card组件中创建了带有输入字段的Card组件，该组件称为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;

因此，基本上第一个名为“受益人”的组件将具有一个AddBeneficiary组件，或者将加载其中的许多组件。我需要知道什么是最好的方法？希望这个问题能给您一些背景信息。任何帮助将不胜感激，我对编程非常陌生，并尝试每天尽可能多地学习。请忽略我是否提到或询问过原始的东西！

Answer 1

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

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;

根据事件多次渲染组件

1 个答案: