Prevent onClick event by clicking on a child div

Question

I'm trying to create a modal in React JS

I have one outter div which is the whole body and I have I inner div. I want to apply the function to close the modal if it's clicked outside of the inner div.

My code is as follows :

popupOutterDivStyle() {
    return {
        zIndex: 10000,
        position: "fixed",
        width: "100%",
        height: "100%",
        top: 0,
        left: 0,
        background: "rgba(102,102,102,0.8)"
    }
}

popupInnerDivStyle() {
    return {
        zIndex: 20000,
        position: "fixed",
        width: "70%",
        top: "50%",
        left: "50%",
        height: "400px",
        marginTop: "-200px", /*set to a negative number 1/2 of your height*/
        marginLeft: "-35%", /*set to a negative number 1/2 of your width*/
        background: "rgba(255,255,255,1)",
        display: 'block'
    }
}

closePopupIcon() {
    return {
        position: "absolute",
        right: -25,
        top: - 27,
        zIndex: 30000,
        cursor: "pointer"
    }
}

render() {

    const animationSettings = {
        transitionName: "example",
        transitionEnterTimeout: 500,
        transitionAppearTimeout: 500,
        transitionLeaveTimeout: 500,
        transitionAppear: true,
        transitionLeave: true
    };

    return (

        <div onClick={this.props.closeModal}>
            <ReactCSSTransitionGroup {...animationSettings}>
            <div key={this.props.modalState} style={this.popupOutterDivStyle()} className={showModal}>

                <div style={this.popupInnerDivStyle()}>
                    <a href="#" style={this.closePopupIcon()} onClick={this.props.closeModal}><i className="closePopup ion-ios-close-empty" /></a>
                    {this.props.children}
                </div>

            </div>
            </ReactCSSTransitionGroup>
        </div>

    );
}

When I click on link with the icon or when I click outside of the inner div it's working fine.

But the problem is that it's closed also if I clicked inside the inner div.

I do not want to use jquery.

Any advice?

UPDATE

stopPropagation(event){
    event.stopPropagation();
}


<div>
    <ReactCSSTransitionGroup {...animationSettings}>
     <div id="outter" key={this.props.modalState} style={this.popupOutterDivStyle()} className={showModal} onClick={this.props.closeModal}>

     <div id="inner" style={this.popupInnerDivStyle()} onClick={this.stopPropagation.bind(this)}>
          <a href="#" style={this.closePopupIcon()} onClick={this.props.closeModal}><i className="closePopup ion-ios-close-empty" /></a>
          {this.props.children}
      </div>

    </div>
    </ReactCSSTransitionGroup>
</div>

And this.props.children in my case is a contact form :

export default class ContactForm extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        senderName: '',
        email: '',
        message: '',
        errors: {}
    };

    this.sendingHandle = this.sendingHandle.bind(this);
    this.contactHandle = this.contactHandle.bind(this);
}

contactHandle(event) {
    let field = event.target.name;
    let value = event.target.value;
    console.log(field);
}


sendingHandle(event) {
    event.preventDefault();
}


render() {
    const language = this.props.currentLanguage.homePage;

    return (
        <div className="contact-form">
            <form>
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    <TextInput
                        type="text"
                        name="senderName"
                        label={language.contactNameLabel}
                        labelClass="contactLabel"
                        placeholder={language.contactNameLabel}
                        className="templateInput"
                        icon="user"
                        iconSize="15x"
                        iconClass="contactFaIcon"
                        onChange={this.contactHandle}
                        value={this.state.name}
                        errors={this.state.errors.senderName}

                    />

                </div>
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <TextInput
                        type="text"
                        name="email"
                        label={language.contactEmailLabel}
                        labelClass="contactLabel"
                        placeholder={language.contactEmailLabel}
                        className="templateInput"
                        icon="envelope-o"
                        iconSize="15x"
                        iconClass="contactFaIcon"
                        onChange={this.contactHandle}
                        value={this.state.email}
                        errors={this.state.errors.email}
                    />
                </div>

                <div className="col-md-12 col-sm-12 col-xs-12">
                                    <Textarea
                                        className="message"
                                        name="message"
                                        placeholder={language.contactMessageLabel}
                                        label={language.contactMessageLabel}
                                        labelClass="contactLabel"
                                        icon="comments-o"
                                        iconSize="15x"
                                        iconClass="contactFaIcon"
                                        onChange={this.contactHandle}
                                        errors={this.state.errors.message}
                                    />
                </div>
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                    <Button text="Verzenden" handleClick={this.sendingHandle.bind(this)}/>
                </div>
            </form>
            <div className="clearfix" />
        </div>
    );
}
}

Answer 1

Attach a function to the inner div which stops propagation.

   function stopPropagation(e) {
      e.stopPropagation();
   }

In your case <div style={this.popupInnerDivStyle()} onClick={stopPropagation}>

Does this help you: ReactJS SyntheticEvent stopPropagation() only works with React events?

Answer 2

如果单击内部元素，您可以使用JS Event.stopPropagation来防止事件冒泡到父级。