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

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'将其传递给组件，它就可以工作。