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

【问题标题】：React | Virtual DOM element click event not triggering反应 |虚拟 DOM 元素点击事件未触发
【发布时间】：2018-08-02 18:19:08
【问题描述】：

我的项目使用Ant Design 和React js。

问题

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

JS 代码

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

包含场景的完整代码 stackblitz

【问题讨论】：

标签： javascript reactjs onclick virtual-dom

【解决方案1】：

您在类外部定义了content，然后将this.handleClick 作为点击处理程序提供给它。然而在课堂之外，this 并不指向class。您应该在 class 中定义 content 并使用 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>

【讨论】：

不要在课堂上使用const。看看我的回答代码。是content = (...
现在的错误是什么？答案中的代码有效。
@MariaJeysinghAnbu 看看我的回答。我说使用this.content 而不仅仅是content。 <Popover content={this.content} title="Title">

【解决方案2】：

只需将'content'带入类中，并通过'this.content'将其传递给组件即可。

【讨论】：