通過單擊子 div 來防止 onClick 事件

Question

我正在嘗試在 React JS 中創建一個模態

我有一個外部 div，它是整個身體，而我有一個內部 div。 如果在內部 div 之外單擊它，我想應用該函數來關閉模態。

我的代碼如下：

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>

    );
}

當我單擊帶有圖標的鏈接或單擊內部 div 之外時，它工作正常。

但問題是，如果我在內部 div 內單擊它也會關閉。

我不想使用 jquery。

有什么建議嗎？

更新

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>

而this.props.children在我的情況下是一個聯系表格：

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

將一個函數附加到停止傳播的內部 div。

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

在你的情況下<div style={this.popupInnerDivStyle()} onClick={stopPropagation}>

這對您有幫助嗎： ReactJS SyntheticEvent stopPropagation() 僅適用於 React 事件？

Answer 2

如果單擊內部元素，您可以使用JS Event.stopPropagation來防止事件冒泡到父級。