javascript - How to control model switch using antd model in react

Question

How to control the model switch using antd model in react

Parent primary key component incoming attributes

<AdvSimpleInfo visible={this.state.advSimpleInfoModel.visible}/>

advSimpleInfoModel parent component state object

advSimpleInfoModel: {
   visible: false
 }

Subprimary key

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>
    );
  }
}

The sub-component property changes the incoming value, but the pop-up window cannot appear

visible={this.props.visible}

Answer 1

I can’t see a way to change the visible value in the state. Not detailed enough.

Answer 2

I can’t tell the difference between state and props. Your showModal method is not bound to this. Take a good look at the example on the official website:

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);