反应 | 虚拟 DOM 模式未显示

Question

I'm using React JS and Ant Design for my project.

Problem

I'm creating virtual DOM element. It has Popover In that there is Button and then clicking that showing Modal .

It showing error Cannot read property 'setState' of undefined

JS Code

content = (
  <div className="RecurringPopover"> 
    <button onClick={this.showModal}> Show Modal </button> 
  </div>
);

Full Code on StackBlitz

Answer 1

You need to bind the method to the proper scope:

content = (
  <div className="RecurringPopover"> 
    <button onClick={this.showModal.bind(this)}> Show Modal </button> 
  </div>
);

Answer 2

add on your constructor

 constructor(props) {
    super(props);
    this.showModal = this.showModal.bind(this)
    this.state = {
        // hereyour state
    };
}

or

onClick={this.showModal.bind(this)}

To close or open the modal you can do this

 showModal() {
    this.setState({
        modal: !this.state.modal
    });
}