使用redux单击react- bootstrap中的外部模态

Clicking outside modals in react-boostrap using redux

本文关键字：外部 模态 bootstrap redux 单击 react- 使用      更新时间：2023-09-26

我有一个模态，它有以下代码:

class CreateBookingModal extends React.Component {
    render() {
        return (
            <Modal show={this.props.showModal}>
                <Modal.Header>
                    <Modal.Title>{`${strings.createBookingModal.title} ${convertDateToString((this.props.bookingDate || new Date()))}`}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {strings.createBookingModal.body}
                </Modal.Body>
                <Modal.Footer>
                    {/* TODO */}
                    <Button onClick={this.props.onCancelBookingCreation}>{strings.createBookingModal.cancel}</Button>
                    <Button onClick={() => this.props.onCreateBooking(123, 123, 123)} bsStyle="primary">{strings.createBookingModal.save}</Button>
                </Modal.Footer>
            </Modal>
        )
    }
}

showModal和bookingDate都是使用redux注入的。现在，只要我使用绑定了两个分派处理程序的两个按钮，一切都很好。然而，我还想关闭模态(即通过使用onCancelBookingCreation将showModal的值更改为false)，当escape被按下时，或者人单击模态外部。有什么(漂亮的)方法可以做到这一点吗?

你可能应该创建一个动作，当点击'body'元素(或任何作为modal背景的元素)时，这个动作应该将状态'showModal'更改为false，当点击modal时，你应该使用e.s stoppropagation来阻止点击事件传播到~background元素

相关文章：