Question

我正在使用Ant Design和React js作为我的项目。

问题

我在Popover中有一个按钮，并且该按钮有点击事件。问题是按钮点击事件没有触发。

JS代码

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

包含 stackblitz

中的方案的完整代码

Answer 1

您已在课程外定义content，然后将this.handleClick作为点击处理程序提供给它。但是在课外，this并未指向class。您应该在content中定义class并使用this.content来访问它。

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>

Answer 2

只需将“content”带到课堂内，然后通过“this.content”将其传递给组件即可。

反应|虚拟DOM元素点击事件未触发

2 个答案: