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. 視頻文件不能播放,怎么辦?2. 前端 - 誰來解釋下這兩個 CSS selector 區別3. javascript - 求幫助 , ATOM不顯示界面!!!!4. javascript - ios返回不執行js怎么解決?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. html5 - HTML代碼中的文字亂碼是怎么回事?7. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?8. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處9. javascript - vue2如何獲取v-model變量名10. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示
