javascript - Comment contrôler le changement de modèle à l'aide du modèle ANTD dans React
给我你的怀抱
给我你的怀抱 2017-06-05 11:11:44
0
2
995

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}
给我你的怀抱
给我你的怀抱

répondre à tous(2)
我想大声告诉你

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

某草草

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);
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal