javascript - Bagaimana untuk mengawal suis model menggunakan model antd dalam bertindak balas
给我你的怀抱
给我你的怀抱 2017-06-05 11:11:44
0
2
1010

Cara mengawal suis model menggunakan model antd dalam react

Komponen utama utama ibu bapa menghantar atribut

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

advSimpleInfoModel objek keadaan komponen induk

advSimpleInfoModel: {
   visible: false
 }

Sub kunci utama

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

Sifat subkomponen menukar nilai yang dihantar, tetapi tetingkap timbul tidak boleh muncul

visible={this.props.visible}
给我你的怀抱
给我你的怀抱

membalas semua(2)
我想大声告诉你

Saya tidak dapat melihat cara untuk menukar nilai yang boleh dilihat di negeri ini. Tidak cukup terperinci.

某草草

Saya tidak dapat membezakan antara keadaan dan props Kaedah showModal anda tidak terikat dengan ini. Lihat contoh di tapak web rasmi:

.
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);
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan