reactjs-popup didn't open as ever after closeOnDocumentClick event triggered - reactjs

Question

The demo case is here. To regenerate it, just do as follows:
click on [Click me.], then the popup will show;
click anywhere but the popuped block, the popup will hide;
click on [Click me.], it's expected that the popup window will show again, but the fact is just the opposite.
What's the problem? Any ideas?

Answer 1

Use onClose prop of reactjs-popup as shown below.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Popup from "reactjs-popup";
class App extends Component {
constructor() {
super(
);
this.onClick = this.onClick.bind(this);
this._popUpClosed = this._popUpClosed.bind(this);
this.state = {
name: 'React',
open:false
};
}
_popUpClosed(){
this.setState({open: false});
}
onClick() {
this.setState({open: true});
}
render() {
return (
<div>
<Popup open={this.state.open} onClose={this._popUpClosed}/>
<Hello name={this.state.name} />
<button onClick={this.onClick}>
Click me.
</button>
</div>
);
}
}
render(<App />, document.getElementById('root'));

Answer 2

it seems like you need to make open false again so that the popup can show up when you change the state of open
you can change the onClick function like this
onClick() {
this.setState({open: !this.state.open});
}
like this you will need to double click in the second time. or better you can add a button in your pop up to close it