Реагируйте TypeScript Модальный - PullRequest
Новая
       15

Реагируйте TypeScript Модальный

0 голосов
/ 19 декабря 2018

Modal.tsx 

import React from 'react';
import './Modal.css'

interface IProps {
    show?: boolean;
    handleClose?: any;
    children: any;
};

const Modal:React.SFC<IProps> = ({ handleClose, show, children }: IProps) => {
    const showHideClassName = show ? "display-block" : "display-none";
    return <div className={showHideClassName}>
        <section className="modal-main">
          {children}
            <button onClick={handleClose}>close</button>
        </section>
      </div>;
};

export default Modal;

infoPresenter.tsx 

import { Icon } from 'antd';
import React from 'react';
import Modal from '../Modal';
import './Info.css';

class Info extends React.Component{

  public state = {
    show: false
  };

  public showModal = () => {
    this.setState({ show:true })
  }

  public hideModal = () => {
    this.setState({ show:false })
  }

  public render(){
    return (
      <section className="Info">
        <div className="InfoTitle">
          <h1>Philociphy</h1>
          <p>
            lorem ipsum
      </p>
        </div>
        <div className="WholeBox">
          <div className="BoxLeft" onClick={this.showModal}>
            <Modal show={this.state.show} handleClose={this.hideModal}>
                <p>Modal</p>
                <p>Data</p>
              </Modal>
            <p>VISION</p>
            <Icon type="arrow-left" />
          </div>

          <div className="BoxRight">
            <p>VALUE</p>
            <Icon type="arrow-right" />
          </div>
        </div>
      </section>
  )
  }
}

 export default Info;

Я хочу сделать модальное.это работает, но не исчезает.Я проверил все свое состояние и реквизит, но не смог найти проблем.Я не знаю, где в моем коде что-то не так.

пожалуйста, найдите и исправьте это.если у вас есть более хорошая идея, как сделать модал, пожалуйста, дайте мне знать, как реагирует его на машинописный текст.

Спасибо всем, кто смотрит этот вопрос

...