模式窗口从未激活

Question

我正在使用javascript React(我是新手(。在我的主页上，我想单击一个按钮以打开一个对话框窗口，以允许用户输入一些值。

我发现了模态窗口，所以我在分析了一些示例后尝试生成一个，但现在没有任何反应......

我试过这段代码：

我的主页，环境.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> )}

对于模态

文件，模态.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;

当我运行代码时，我收到此错误：

警告：未知道具isOpen，onClose标签上。从元素中删除这些道具

当我单击应该打开对话框的按钮时，页面中间显示文本"模态内容"以及"取消"按钮。而且，在控制台中，布尔值是ModalOpen总是假的......根本没有显示对话框...

Answer 1

两件事。

首先，我不确定你的警告来自哪里，但看看这个：https://reactjs.org/warnings/unknown-prop.html。也许您有一个未大写的用户定义组件(您发布的代码中可能缺少该组件(。

其次，听起来您的模态正在正确打开和关闭，并且您实际上遇到了 CSS 问题。在 modalStyle 上，添加以下内容：

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

这应该给你一个起点。

在

相关的说明中，在学习 React 组件样式时，尝试使用 UI 工具包，例如语义 (https://react.semantic-ui.com(。