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
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>