javascript - react 里使用antd model 怎么控制model 开关

Question

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 title="广告简单信息"
          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}

Answer 1

看不到改变state里面的visible的方法呀。不够详细唉。

Answer 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
          title="Basic 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);