Блог

Я использую react-bootstrap (документация: https://react-bootstrap.github.io/components.html#modals-props ) и я не уверен, как я могу закрыть модал, щелкнув по фону.

В настоящее время я закрываю его (не обращайте внимания на функцию onCloseModal — она в значительной степени закрывает модальный режим):

 <Modal closeButton={true} onHide={this.onCloseModal.bind(this)}>
    <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
    </Modal.Header>
</Modal>
  

Нет документации о том, как закрыть, нажав на фон. Извините, я ничего толком не пробовал, но я везде искал в Stackoverflow, и все решения соответствуют jQuery, а не React.

Это есть в документации в props разделе с именем backdrop

Если вы знакомы с Bootstrap, вы можете знать атрибут, описывающий отображение / скрытие модального режима при нажатии на фоновое действие. вызывается static backdrop .

Итак, чтобы закрыть модальный режим, нажав на фон. Попробуйте приведенный ниже код.

 <Modal {...this.props} backdrop="true">
    <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <h4>Wrapped Text</h4>          
    </Modal.Body>
    <Modal.Footer>
        <Button onClick={this.props.onHide}>Close</Button>
    </Modal.Footer>
</Modal>
  

Обратите внимание, что ...this.props это атрибуты распространения JSX