reactjs-popup 在关闭文档单击事件触发后没有像以前一样打开

Question

演示案例在这里。要重新生成它，只需执行以下操作：

1. 点击[点击我]，然后弹出窗口将显示；

2. 单击弹出的块之外的任何位置，弹出窗口将隐藏；

3. 点击[点击我。]，预计弹出窗口将再次显示，但事实恰恰相反。

怎么了？有什么想法吗？

Answer 1

使用reactjs弹出窗口的onClose道具，如下所示。

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

似乎需要再次将open设为false，以便在更改open状态时显示弹出窗口你可以像这个一样更改onClick功能

onClick() {
this.setState({open: !this.state.open});
}

像这样，你需要在第二次双击。或者更好的是，你可以在弹出窗口中添加一个按钮来关闭