时间戳

首页 > 解决方案 > 在每次渲染时保持反应组件的状态

reactjs - 在每次渲染时保持反应组件的状态

问题描述

我有一个“添加”按钮，每次点击都会呈现相同的组件。父状态作为道具传递给该组件，其中包含电子邮件、姓名等字段。添加按钮最多可以按下 9 次，这意味着我将使用“添加”按钮在表单中动态生成 9 个子组件。我想维护所有这 9 个子组件的状态

输入类型=“按钮”名称=“numOwners”值=“添加”/>

BasicDetails {...this.state}/>

每次单击添加组件时，都会呈现 BasicDetails

是否可以使用反应状态？我是 React 的新手，任何帮助将不胜感激。

标签： reactjs

解决方案

您可以简单地将数组或对象与当前存在的处于父状态的子项的值一起使用，然后将这些值映射到渲染创建的组件。每次“添加”单击将项目附加到父状态后，将出现新创建的子项。

  class Parent extends Component {
     state={ items : [] }

   render() {
     return <>
        {this.state.items.map(data => <Child {...data}/>)}
     <\>
     }
  }

推荐阅读