时间戳

首页 > 解决方案 > 根据事件多次渲染组件

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

问题描述

所以我在做一个react项目，有一张卡片需要根据用例反复填写。有时卡片只会被填写一次，有时同一张卡片必须多次填写，我怎样才能让卡片组件根据用例多次加载。一旦有人开始在第一张卡片中输入内容，我希望在已经可用的卡片组件下方同时加载一个新的卡片组件。

我已经在组件中创建了带有输入字段的 Card 组件，称为 IndividualVendor，并且在初始加载时只加载了一个组件。此外，可以添加此类卡以添加更多供应商。

这是主要受益人组件和名为 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 组件或其中的许多组件。我需要知道最好的方法是什么？希望这个问题能给你一些背景。任何帮助将不胜感激，我对编程很陌生，每天都在努力学习。如果我提到或问了一些太原始的东西，请忽略！！

标签： javascriptreactjsfrontend

解决方案

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

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;

推荐阅读