React将Modal中组件销毁

最新推荐文章于 2024-04-18 04:03:56 发布

祁沐白神

最新推荐文章于 2024-04-18 04:03:56 发布

阅读量2.7k

点赞数 1

分类专栏： react 文章标签： react 生命周期组件销毁组件通讯

本文链接：https://blog.csdn.net/qq_40313245/article/details/86691053

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

将组件放到Modal组件中进行弹框显示，可是只有在Modal第一次显示时，才会执行子组件的componentDidMount（组件生命周期中只执行一次），获取数据的方法写在了componentDidMount中，这就导致数据发生变化后，弹窗里的数据并没有发生更改。

方法一：

使用变量控制，关闭Modal时将变量this.setState({ SortingModal: false}), 简单粗暴

{
   this.state.SortingModal ?
   <Modal
     title={}
     width="1000px"
     visible={this.state.SortingModal}
     footer={null}
     onCancel={() => {this.onSortingCancel()}}
     >
     <CustomSpitemSorting onRef={this.onRef}/>

     <div className="button-wrapper">
       <Button type="primary" onClick={this.saveStoring} icon="save">保存</Button>
     </div>
   </Modal> : null
 }

方法二：

使用组件通讯，子组件赋值的过程（componentDidMount里的）写成一个方法，然后关闭Modal时，调用这个方法就可以了

  // 调用子组件的
  onRef = (ref) => {
    this.SpItemContentSorting = ref
  }
  // 关闭modal 
  onSortingCancel = () => {
    this.SpItemContentSorting.onSave()
  }