使用redux

Question

我有一个Modal，其代码如下：

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），当按下任一个转义符，或者人员在模态外部单击时。有没有（漂亮的）方法呢？

Answer 1

你应该创建一个动作，当点击'body'元素（或任何作为modal背景的元素）时将调度该动作，这个动作应该将状态'showModal'改为false，当你点击modal你应该使用e.stopPropagation停止点击事件传播到~background元素。