首页 > 其他分享 >【React工作记录七十一】直接用ref控制子组件弹框的开启

【React工作记录七十一】直接用ref控制子组件弹框的开启

时间:2023-05-28 11:33:31浏览次数:36  
标签:歌谣 title url handleSuccessful 弹框 React 组件 直接 ref


 

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

如何直接通过父组件直接改变子组件的状态

【React工作记录七十一】直接用ref控制子组件弹框的开启_弹出框

【React工作记录七十一】直接用ref控制子组件弹框的开启_弹出框_02编辑

 子组件

<RestoreSettlement
          onRef={(node) => (this.RestoreSettlement = node)}
          handleSuccessful={this.handleSuccessful}
        />

【React工作记录七十一】直接用ref控制子组件弹框的开启_弹出框_03

直接

this.RestoreSettlement.setState({
      showModal: true,
      codeList: selectedRowKeys,
      title: title,
      url: url,
    });
  };

【React工作记录七十一】直接用ref控制子组件弹框的开启_List_04

总结

父直接控制子组件的弹出框的开启 nice 直接setstate


标签:歌谣,title,url,handleSuccessful,弹框,React,组件,直接,ref
From: https://blog.51cto.com/u_14476028/6364897

相关文章

  • 【React工作记录七十二】时间秒转换为毫秒
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣时间秒转换为毫秒编辑 核心代码getTim......
  • Webpack and Babel — What are they, and how to use them with React
    摘抄自:https://medium.com/@agzuniverse/webpack-and-babel-what-are-they-and-how-to-use-them-with-react-5807afc82ca8WebpackandBabel—Toolswecan’tcodewithoutWe’llbeconfiguringbothoftheseforourReactproject,sofirsthere’saquickexplanation......
  • 1. java + react 实现 HRM
    1.云服务的三种方式1.1IAAS基础设施即服务,只会提供基础的设施,eg:服务器,网络等;1.2PAAS平台即服务,提供平台,可以把自己写好的代码部署到平台上;1.3SAAS软甲即服务eg:hrm,cms,crm等;提供所有的服务;【部署到互联网】;......
  • React 全局Loading
    import{Spin}from'antd'importReactDOMfrom'react-dom/client'importtype{SpinProps}from'antd'classLoading{privatecontainer=document.createElement('div')privateroot=ReactDOM.createRoot(this.co......
  • 在jsp中为a标签的href属性拼接动态变量的方法
    在做web项目练习时遇到了一个需要为href拼接动态变量的问题,在jsp中有这么一段代码实现用户的删改功能。首先摆出我一开始错误的代码来说明问题。<html><head><title>人员管理</title></head><body><%//从后端Servlrt获取的一个储存我自定义的Persion对象的ListList<Pers......
  • React18+TS+NestJS+GraphQL全栈开发示例
    React18+TS+NestJS+GraphQL全栈开发示例全栈开发是指一位开发人员可以熟练掌握前端、后端和数据库等多个领域的技术,能够完整地开发一个应用程序。在本文中,我们将介绍如何使用React18+TS+NestJS+GraphQL这个技术组合来进行全栈开发。技术选型在开始开发之前,我们需要选择合适的技术栈......
  • 【React工作记录六十八】ant design一个页面(新增编辑)
     目录前言导语总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语antdesign锚点组件编辑核......
  • 【React工作记录七十】判断数组对象中是否满足某条件
     目录前言导语 核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣歌谣数组......
  • 【React工作记录六十九】Taro中的轻提示
     目录前言导语代码部分运行结果代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷......
  • 第一个react.js程序:create and show comment
    importReact,{Component}from"react";import{render}from"react-dom";importPropTypesfrom"prop-types";constnode=document.getElementById("root");constdata={post:{id:123,content:......