javascript - react 里使用antd model 怎么控制model 开关
问题描述
react 里使用antd model 怎么控制model 开关
父主键组件 传入属性
<AdvSimpleInfo visible={this.state.advSimpleInfoModel.visible}/>
advSimpleInfoModel 父组件state对象
advSimpleInfoModel: { visible: false }
子主键
import React from ’react’;import { Modal} from ’antd’;import Common from ’pricomp/Common’;import ’./advSimpleInfo.less’export default class AdvSimpleInfo extends React.Component { constructor(props) { super(props); this.state = { confirmLoading: false }; } showModal() { this.setState({ visible: true }); } handleOk() { let _this = this; this.setState({ Loading: true }); let params = { advertId: this.props.id }; const promise = Common.ajax(’pageQueryPrivilege’, params); promise.then(function(res) { console.log(res); }) } render() { return ( <p><Modal visible={this.props.visible} onOk={this.handleOk} confirmLoading={this.state.confirmLoading} onCancel={this.handleCancel}> <p>{this.state.ModalText}</p> <p className='adv-simple-info-warp'> <p><span>ID:</span>88888</p> <p><span>名称:</span>一个200红包</p> <p><span>状态:</span>有效</p> <p><span>库存:</span>剩余/总数</p> <p><span>广告主:</span>剩余/总数</p> <p><span>代理商:</span>剩余/总数</p> </p></Modal> </p> ); }}
子组件属性 改变了传入的值 可是弹窗不能出现
visible={this.props.visible}
问题解答
回答1:看不到改变state里面的visible的方法呀。不够详细唉。
回答2:state 和 props 傻傻分不清,你的showModal这个方法也没有绑定this,好好看看官网的例子:
import { Modal, Button } from ’antd’;class App extends React.Component { state = { visible: false } showModal = () => { this.setState({ visible: true, }); } handleOk = (e) => { console.log(e); this.setState({ visible: false, }); } handleCancel = (e) => { console.log(e); this.setState({ visible: false, }); } render() { return ( <p><Button type='primary' onClick={this.showModal}>Open</Button><Modal visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}> <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p></Modal> </p> ); }}ReactDOM.render(<App />, mountNode);
相关文章:
1. android - java 泛型不支持数组,那么RxJava的Map集合有什么方便的手段可以定义获得一串共同父类集合数据呢?2. javascript - vue 移动端的input 数字输入优化3. javascript - 有什么兼容性比较好的办法来判断浏览器窗口的类型?4. java - 自己制作一个视频播放器,遇到问题,用的是内置surfaceview类,具体看代码!5. java - mongodb分片集群下,count和聚合统计问题6. 为什么我ping不通我的docker容器呢???7. 服务器端 - 采用nginx做web服务器,C++开发应用程序 出现拒绝连接请求?8. python - pandas按照列A和列B分组,将列C求平均数,怎样才能生成一个列A,B,C的dataframe9. 关于docker下的nginx压力测试10. java - 静态属性中的赋值和静态代码块中的赋值有什么区别?
