CODEWITHSUNDEEP
reactjs
ddwolf
ddwolf

Reputation: 101

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

The demo case is here. To regenerate it, just do as follows:

  1. click on [Click me.], then the popup will show;

  2. click anywhere but the popuped block, the popup will hide;

  3. 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?

Upvotes: 2

Views: 4038

Answers (2)

cheekujha
cheekujha

Reputation: 801

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

Upvotes: 5

EL.zakaria
EL.zakaria

Reputation: 1

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

Upvotes: 0

Related Questions