首页 文章

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

提问于
浏览 次
1

我是React的新手所以请耐心等待 .

我正在尝试创建一个模态组件，它将从任何全局元素的onClick（）函数触发，即：链接，按钮， Span 或整个应用程序中的任何内容 .

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;
javascript reactjs babeljs jsx

1 回答

  • 0

    你可以使用 react-bootstrap-modal ：

    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>
    )
  }
}

    如需进一步参考，请访问：

    https://github.com/jquense/react-bootstrap-modal

    如有必要，您可能还需要包含bootstrap-CSS文件！如果有的话，请在这里发布一些错误，谢谢

    回复于

相关问题