React Popin open close on outside click

Question

I have some trouble to create my popin with all actions linked

I use REACT JS

I have a button like this:

<button className="b-circle" onClick={() => this.openPopin()}></button>
<div className="u-200">Frequence</div>
{OpenPopin ? <PopinComponent />: ''}
openPopin() {
    this.setState({ openFrequency: true })
}

In the popinComponent I have a cross , when I clicked on it I need to close the popin and I need to detect click outside popin to close it too

Do you have any solution to achieve this ? What is the best way ?

Thanks

Possible duplicate of [Detect click outside React component](https://stackoverflow.com/questions/32553158/detect-click-outside-react-component) — Abdennour TOUMI, Dec 08 '17 at 10:25
Not duplicate because my popin is open from parent component — Lionel B, Dec 08 '17 at 10:26
can we see code of `PopinComponent ` component ? are you using onclickoutside hoc ? — Abdennour TOUMI, Dec 08 '17 at 10:27
No i don't write component now because i don't found a good solution to achieve this — Lionel B, Dec 08 '17 at 10:28

score 0 · Answer 1 · answered Dec 08 '17 at 10:40

0

You can pass prop 'clickevent' to PopinComponent and than trigger onclick on cross button from there and call this prop in that function. Something like this :

<button className="b-circle" onClick={this.openPopin.bind(this)}>
        </button>
        <div className="u-200">Frequence</div>
        {OpenPopin ? <PopinComponent clickevent={this.closePopin.bind(this)} />
           : ''}


  openPopin() {
    this.setState({ openFrequency: true })
  }

  closePopin(){
   this.setState({openFrequency: false})
  }

Now in PopinComponent you can pass this.props.clickevent in onClick -

<button onClick={this.props.clickevent}>Close</button>

answered Dec 08 '17 at 10:40

Shivani

350
3
13

1

Thanks for you help, it's work and now i have the second way to close the popin it's to detect click outside popin component when it's open – Lionel B Dec 08 '17 at 10:51
Great ! But if you think my answer was useful, please click that arrow button. Thanks. – Shivani Dec 08 '17 at 11:29

React Popin open close on outside click

1 Answers1