模态窗口从未激活

Question

I am working with javascript React (I am new to it). From my main page, I want to click on a button to open a dialog window to allow the user to input some values.

I found out about modal windows, so I tried generating one after analysing some examples, but for now, nothing happens...

I tried this code :

My main page, Environment.js :

import React, { Component } from 'react'
import { ReactLoader } from 'Loader'
import Modal from './Modal';

class EnvironmentExtension extends ModelExtension {

constructor (viewer, options) {

 super (viewer, options)
 this.state = { isModalOpen: false };

 this.openModal = this.openModal.bind(this)
 this.closeModal = this.closeModal.bind(this)
 this.react = options.react }

openModal = () => {
 this.react.setState({isModalOpen: true});
 console.log("openModal()");
 console.log('state modal');
 console.log(this.state.isModalOpen)}

closeModal = () => {
 this.react.setState({isModalOpen: false});
 console.log("closeModal()");
 console.log('state modal');
 console.log(this.state.isModalOpen)
}

render () {
 return (
  <button onClick={() => this.openModal()}  
    title="Show map dialog :O">
    <span className="fa fa-hand-o-left"/>
  </button>

  <Modal isOpen={this.state.isModalOpen} onClose={()=>this.closeModal()}>
    content for modal
    <button onClick={()=> this.closeModal()}>
     Close
    </button>
   </Modal> )}

And for the modal file, modal.js :

import React from 'react';
import PropTypes from 'prop-types';

class Modal extends React.Component {
 render() {

 if(!this.props.isOpen) {
  return null;
}

 // The gray background
 const backdropStyle = {
   position: 'fixed',
   top: 0,
   bottom: 0,
   left: 0,
   right: 0,
   backgroundColor: 'rgba(0,0,0,0.3)',
   padding: 50};

 // The modal "window"
 const modalStyle = {
   backgroundColor: '#fff',
   borderRadius: 5,
   maxWidth: 500,
   minHeight: 300,
   margin: '0 auto',
   padding: 30};

return (
  <div className="backdrop">
    <div className="modal">
      {this.props.children}

      <div className="footer">
        <button onClick={this.props.onClose}>
          Close
        </button>
      </div>
    </div>
  </div>
);
}
}

Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  onOpen: PropTypes.bool,
  children: PropTypes.node
};

export default Modal;

When I run the code, I get this error :

Warning: Unknown props isOpen , onClose on tag. Remove these props from the element

And when I click the button supposed to open the dialog box, I have the text "content for modal" showing up in the middle of the page, as well as the button Cancel. Moreover, in the console, the boolean isModalOpen is always false... No dialog box showing up at all...

Answer 1

Two things.

Firstly, I'm not sure where your warning is coming from, but take a look at this: https://reactjs.org/warnings/unknown-prop.html . Perhaps you have a user-defined component that is not capitalised (it might be missing from the code you've posted).

Secondly, it sounds like your modal is opening and closing correctly, and that you're actually encountering a CSS issue. On modalStyle , add the following:

position:absolute
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:400px;
height:300px;

This should give you a starting point.

On a related note try using a UI kit, like Semantic ( https://react.semantic-ui.com ) when learning about styling up React components.