如何使用React.js门户关闭和卸载Bootstrap模式

Question

我正在创建一个模式来从表中的一行激活onClick。模式将出现并显示表行包含的所有数据。我已经能够出现模态，但是在安装后我无法关闭它。

我认为状态没有更新，因为setState需要一个回调函数来立即触发它，但这对我不起作用。

// Modal.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
    el = document.createElement('div');

    componentDidMount() {
        modalRoot.appendChild(this.el);
    }

    componentWillUnmount() {
        modalRoot.removeChild(this.el);
    }

    render() {
        // Use a portal to render the children into the element
        return ReactDOM.createPortal(
            <div className="modal fade show" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-keyboard="false" data-backdrop="static" style={{display: 'block'}} aria-modal="true">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button onClick={ this.handleHide } type="button" className="close" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        <div className="modal-body">
                            { this.props.children }
                        </div>
                        <div className="modal-footer">
                            <button onClick={ this.props.onClose } type="button" className="btn btn-secondary">Close</button>
                            <button type="button" className="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>,
        this.el);
    }
}

export default Modal

// FlightLogSummary.js
import React, { Component } from 'react'
import Modal from '../layout/Modal'

class FlightLogSummary extends React.Component {
    state = {showModal: false}

    handleShow = () => {
        this.setState({showModal: true});
    }

    handleHide = () => {
        this.setState({showModal: false});
    }

    render() {
        const { flightLog } = this.props

        const modal = this.state.showModal ? (
            <Modal>
                Modalidy
            </Modal>
        ) : null;

        return (
            <tr onClick={ this.handleShow }>
                <th scope="row">{ flightLog.flightDate }</th>
                <td>{ flightLog.flightRoute }</td>
                <td>{ flightLog.flightAircraft }</td>
                <td className="text-right">{ flightLog.flightTotal }</td>
                { modal }
            </tr>
        )
    }
}

export default FlightLogSummary;

模式应该由行上的onClick触发。模态应该出现。单击模态的关闭按钮时，它应该消失。

Answer 1

你不需要createPortal，因为孩子们已经作为道具传递了。只需将onClose函数传递给Modal组件即可。

我在这里使用了一个按钮来切换模态组件，但你也可以将onClick句柄传递给tr元素。

此外，利用setState函数参数根据先前的状态值更新状态。

class Modal extends React.Component {
  render() {
    return (
      <div className="modal fade show" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-keyboard="false" data-backdrop="static" style={{display: 'block'}} aria-modal="true">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button onClick={this.props.onClose} type="button" className="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              {this.props.children}
            </div>
            <div className="modal-footer">
              <button onClick={this.props.onClose} type="button" className="btn btn-secondary">Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

class FlightLogSummary extends React.Component {
    state = { showModal: false }

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

    render() {          
      return (
        <div>
          {/* <tr onClick={this.toggleModal}> ... </tr> */}
          <button onClick={this.toggleModal}>Toggle Modal</button>
          {this.state.showModal && <Modal onClose={this.toggleModal}>Modality</Modal>}
        </div>
      )
    }
}

Answer 2

您可以使用反应库中的modal进行引导。你可以使用react-bootstrap或reactstrap的模态。这些库与反应更兼容。

除此之外，handleHide函数在FlightLogSummary，你试图在Modal组件中访问它。您可以关注：

<Modal close={this. handleHide}>
   Modalidy
</Modal>
// in Modal component
<button onClick={this.props.close} type="button" className="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

你也可以在console.log()函数中添加handleHide来检查它是否被调用。