Javascript 使用单独的模态触发器按钮创建模态组件

我是新来的，所以请容忍我

我试图创建一个模态组件，该组件将由onClick（）函数从任何全局元素触发，例如：链接、按钮、跨度或整个应用程序中的任何元素

import React from 'react';
import ReactDOM from 'react-dom';


const display = {
  display: 'block'
};

const hide = {
  display: 'none'
};


class Modal extends React.Component {

    constructor(props) {
      super(props);
      this.toggle = this.toggle.bind(this);
      this.state = {
        toggle: false
      }
    }

    toggle(event) {
      this.setState(prevState => ({
        toggle: !prevState.toggle
      }));
    }

    render() {
        return (
          <div>
            <button onClick={this.toggle}>Show Modal</button>
            <div className="modal" style={this.state.toggle ? display : hide} >
              <div className="modal-content">
                {this.props.children}
                <button onClick={this.toggle}>Close</button>
              </div>
            </div>
          </div>
        );
      }

}


module.exports = Modal;

从“React”导入React；
从“react dom”导入react dom；
常数显示={
显示：“块”
};
常数隐藏={
显示：“无”
};
类Modal扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
切换：false
}
}
切换（事件）{
this.setState（prevState=>({
切换：！prevState.toggle
}));
}
render（）{
返回(
显示模态
{this.props.children}
接近
);
}
}
module.exports=模态；

您可以使用

反应引导模式

：

npm install --save react-bootstrap-modal

然后在组件中：

import React from 'react';
import Modal from 'react-bootstrap-modal';

export default class ModalExample extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      open: false,
    }
  }

  openModal = () => this.setState({ open: true })

  closeModal = () => this.setState({ open: false })

  render(){

    return (
      <div>
        <button type='button' onClick={this.openModal}>Launch modal</button>

        <Modal
          show={this.state.open}
          onHide={this.closeModal}
          aria-labelledby="ModalHeader"
        >
          <Modal.Header>
            <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
            <div onClick={this.closeModal}>CLOSE HERE</div>
          </Modal.Header>
          <Modal.Body>
            <p>Some Content here</p>
          </Modal.Body>
          <Modal.Footer>
            // If you don't have anything fancy to do you can use
            // the convenient `Dismiss` component, it will
            // trigger `onHide` when clicked
            <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>

            // Or you can create your own dismiss buttons
            <button className='btn btn-primary' onClick={this.closeModal}>
              CLOSE HERE TOO
            </button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

从“React”导入React；
从“反应引导模式”导入模式；
导出默认类ModalExample扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
开：错，
}
}
openModal=（）=>this.setState（{open:true}）
closeModal=（）=>this.setState（{open:false}）
render（）{
返回(
发射模态
这里有一个标题
靠近这里
这里有一些内容

//如果你不想做什么，你可以用
//方便的“dismission”组件将
//单击时触发“onHide”
取消
//或者您可以创建自己的取消按钮
这里也很近
)
}
}

如需进一步参考，请点击此处：

---

如有必要，您可能还需要包含引导CSS文件！如果有错误，请在这里发布，谢谢

如果没有Redux或MobX之类的状态管理库，这将非常乏味。看看这些。使用

react引导模式如何？如果可以的话，我可以给你举个例子。当然，我愿意接受更多的想法。刚才添加了一个答案，请尝试一下，告诉我你的控制台上是否有任何错误，谢谢