當按鈕和功能在單獨的文件中時，如何在react.js中創建一個彈出窗口？

問題描述：網頁上有一個按鈕，當我點擊按鈕時，會出現一個包含圖像的彈出窗口。該按鈕位於名爲「index.jsx」的文件中，單擊該按鈕將在文件「popUp.js」中觸發一個功能，該功能將彈出一個窗口。所以實質上，按鈕和彈出功能在單獨的文件中。當按鈕和功能在單獨的文件中時，如何在react.js中創建一個彈出窗口？

我想寫的功能：

export function PopUp (image: Image){ 
    return{ 
    ... 
    }; 
}

這將具有相同的效果https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal，除了彈出的內容是圖像而不是文字。我想解決方案的重點是將CSS網頁翻譯爲react.js，但不知道語法應該如何。

關於如何實現這一點的任何想法？

來源

2017-06-23 Meggie

梅吉，[答案]（https://stackoverflow.com/a/45792200/1404066） @PatrykWlaź給出的是一個很好的例子。您應該將其標記爲已接受的答案（如果您仍需要幫助，請提出後續問題或修改您的問題）。 – Kenigmatic

您可以使用react-modal輕鬆完成。這裏是一個例子，作爲獎勵我點擊打開的圖像時添加了關閉模式。圖像src及其描述應作爲數據對象中的道具傳遞給popUp組件。

PopUp.js：

import React from 'react'; 
import Modal from 'react-modal'; 
import ModalButton from './modal-button'; 
import style from './style.css'; 

class PopUp extends React.Component { 
    constructor() { 
    super(); 

    this.state = { modalOpened: false }; 
    this.toggleModal = this.toggleModal.bind(this); 
    } 

    toggleModal() { 
    this.setState(prevState => ({ modalOpened: !prevState.modalOpened })); 
    } 

    render() { 
    const { data } = this.props; 
    return (
     <div className={style.modalWrapper}> 
     <ModalButton handleClick={this.toggleModal}> 
      click to open modal 
     </ModalButton> 
     <Modal 
      className={{ base: [style.base]}} 
      overlayClassName={{ base: [style.overlayBase] }} 
      isOpen={this.state.modalOpened} 
      onRequestClose={this.toggleModal} 
      contentLabel="Modal with image" 
     > 
      <img 
      onClick={this.toggleModal} 
      src={data.src} 
      alt='image displayed in modal' 
      /> 
      <span className={style.text}>{data.description}</span> 
     </Modal> 
     </div> 
    ); 
    } 
} 

export default PopUp;

分離按鈕，當你要求：

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

const ModalButton = props => (
    <button className={style.button} onClick={props.handleClick}> 
    {props.children} 
    </button>); 

export default ModalButton;

來源

2017-08-21 08:12:37

當按鈕和功能在單獨的文件中時，如何在react.js中創建一個彈出窗口？

回答

相關問題