Boky Boky - 1 month ago 6
React JSX Question

Prevent onClick event by clicking on a child div

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

If you attach a function to the inner div which stops propagation it should work, right?

   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?

Comments