javascript - Comment contrôler le changement de modèle à l'aide du modèle ANTD dans React

Question

Comment contrôler le commutateur de modèle à l'aide du modèle antd dans React

Composant de clé primaire parent transmettant les attributs

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

Objet d'état du composant parent advSimpleInfoModel

advSimpleInfoModel: {
   visible: false
 }

Sous-clé primaire

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

La propriété du sous-composant modifie la valeur transmise, mais la fenêtre contextuelle ne peut pas apparaître

visible={this.props.visible}

Answer 1

Je ne vois pas de moyen de modifier la valeur visible dans l'état. Pas assez détaillé.

Answer 2

Je ne peux pas faire la différence entre l'état et les accessoires. Votre méthode showModal n'est pas liée à cela. Regardez attentivement l'exemple sur le site officiel :

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