React | Virtual DOM element click event not triggering

Question

I'm using Ant Design and React js for my Project.

Problem

I have a button in Popover and having click event for that button. The problem is button click event is not triggering.

JS Code

const content = (
  <div className="RecurringPopover"> 
    <button onClick={this.handleClick}> Popover Button </button> 
  </div>
);

Full Code with scenario in stackblitz

score 2 · Accepted Answer · answered Feb 22 '18 at 19:01

2

You have defined content outside the class and then supplying this.handleClick as a click handler to it. However outside class, this does not point to the class. You should define content inside class and use this.content to access that.

handleClick() {
      alert('test');
    }
// put it inside class
 content = (
  <div className="RecurringPopover"> 
    <button onClick={this.handleClick}> Popover Button </button> 
  </div>
);
  render() {
    return (
      <div>
        <Row>
          <Col span={12}>      
          // Use this.content instead of just content
          <Popover content={this.content} title="Title">
            <span type="primary">Hover me (Popover Button)</span>

answered Feb 22 '18 at 19:01

Prakash Sharma

15,542
6
30
37

Dont use `const` inside class. Look at my code in answer. It is `content = (...` – Prakash Sharma Feb 22 '18 at 19:05
What is the error now? The code in the answer is working. – Prakash Sharma Feb 22 '18 at 19:08
@MariaJeysinghAnbu Look at my answer. I said use `this.content` instead of just `content`. `` – Prakash Sharma Feb 22 '18 at 19:10

score 0 · Answer 2 · answered Feb 22 '18 at 19:11

0

Just bring the 'content' to inside the class, and pass it to component via 'this.content', it will work.

answered Feb 22 '18 at 19:11

Acauã Pitta

654
1
9
16

React | Virtual DOM element click event not triggering

2 Answers2