Question

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

单击[单击我。]，然后将显示弹出窗口；
单击弹出框以外的任何位置，弹出框将隐藏；
单击[单击我。]，预计弹出窗口将再次显示，但事实恰恰相反。

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

Answer 1

使用reactjs-popup的 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});
  }

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

closeOnDocumentClick事件触发后，reactjs-popup仍未打开

2 个答案: