react中弹框的显示隐藏

这里讲解一下react组件中常见弹框的显示隐藏~ 在这里主要涉及一个知识点，就是父子组件的通讯。

如图所示：

1- 点击编辑按钮的时候弹出对应的弹框。

2- 在弹框中点击确定或者取消的时候弹框消失。

代码如下所示：

父组件：

/*设置默认值*/constructor() {super();this.state = {visible: false,itemData: {}}}/*设置显示隐藏状态和要传递的参数*/showModal = (itemData) => {this.setState({visible: true,itemData});
}/*获取子组件传递过来的值*/changeStatus = (status) =>{this.setState({visible:status})}
/*表格的columns*/const columns= [ {title: '销售总监',dataIndex: 'salemanage',key: 'salemanage',width: 100,},{title: '销售总监UM码',dataIndex: 'salemanageUM',key: 'salemanageUM',width: 100,},{title: '操作',width: 100,key: 'action',className: 'table-action',render: (text, item) => {return (<div><div style={{ 'color': 'blue' }} onClick={this.showModal.bind(this,item)}>编辑</div></div>);},}]render (){/*这里是弹框组件，通过visible，entray，status将父组件的值传递给子组件*/<CollectionCreateFormvisible={visible}entray={itemData}status={this.changeStatus}/>}
}

子组件：

onOk = () => {let status = false;this.props.status(status);}onCancel = () =>{let status = false;this.props.status(status);}render() {const { visible, entray} = this.props;return (<Modalvisible={visible}title="呵呵哒"onCancel={this.onCancel}onOk={this.onOk}></Modal>

react中弹框的显示隐藏相关推荐

React Hooks Ant table 显示/隐藏特定的列
注意:仅适合有一点基础的人看 Ant Design for React:显示/隐藏特定列旧写法如下: 每当开关处于关闭状态时,我都需要隐藏姓氏列,而在开关处于打开状态时,则需要显示该姓氏列 clas ...
Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
泛微OA系统利用Check框控制字段显示隐藏
如下代码所示: <table>之间为在html模板绘制的表格 <table border="1" width="627" height= ...
iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能: {type: 'selection',width: 60,align: ...
vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
:visible.sync弹框显示隐藏
1.:visible指的是属性绑定,表示弹框的显示隐藏,当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏,后面的.sync是什么意思呢,指的就是同步动态双向的来表示vi ...
vue 组件弹出框点击显示隐藏
本案实现的效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被 ...
详细介绍React模态框组件react-modal
1,介绍该组件实现了模态框的一些效果. 这是react-modal官网的配置参数. 模态框的手动实现,并不算太难,这个组件用着还不错. 2,配置参数介绍 import React, { Compon ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...

react中弹框的显示隐藏

1- 点击编辑按钮的时候弹出对应的弹框。

2- 在弹框中点击确定或者取消的时候弹框消失。

父组件：

子组件：

react中弹框的显示隐藏相关推荐

最新文章

热门文章