reactjs&x27；在closeOnDocumentClick事件触发后，无法像以往一样打开

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

单击[单击我]，弹出窗口将显示

单击弹出块以外的任何位置，弹出窗口将隐藏

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

---

有什么问题吗？有什么想法吗？

您似乎需要再次将“打开”设置为false，以便在更改“打开”状态时弹出窗口 您可以像这样更改onClick函数

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

---

像这样，您将需要在第二次双击。或者，您可以在弹出窗口中添加一个按钮来关闭它，使用reactjs弹出窗口的属性，如下所示

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'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
从“reactjs弹出窗口”导入弹出窗口；
类应用程序扩展组件{
构造函数（）{
超级(
);
this.onClick=this.onClick.bind（this）；
this.\u popUpClosed=this.\u popUpClosed.bind（this）；
此.state={
名称：'反应'，
开放：假
};
}
_popUpClosed（）{
this.setState（{open:false}）；
}
onClick（）{
this.setState（{open:true}）；
}
render（）{
返回(
点击我。
);
}
}
render（，document.getElementById（'root'））；

演示不起作用。您还可以共享代码以获得更好的性能吗understanding@cheekujha很抱歉链接不好，我已经更新了。非常感谢：）我想这很奇怪。根据，属性

open

完全控制弹出状态，但它不是。尽管

open

属性仍然是

true

true，但弹出窗口仍然可以关闭，但它不是完美的anwser:）请看@cheekujha的awnser，我认为这是最好的anwser。