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

Question

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

问题

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

JS代码

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

包含场景的完整代码 stackblitz

Answer 1

您已在 class 之外定义了 content，然后将 this.handleClick 作为点击处理程序提供给它。然而在class之外，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>

Answer 2

只要把'content'放到class里面，然后通过'this.content'传递给组件，就可以了。

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

React | Virtual DOM element click event not triggering

javascript

reactjs

onclick

virtual-dom