反應| 虛擬DOM元素點擊事件未觸發

Question

我正在為我的項目使用Ant Design和React js 。

問題

我在Popover中有一個按鈕，並且具有該按鈕的click事件。 問題是按鈕單擊事件未觸發。

JS代碼

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

完整的代碼在場景 stackblitz

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

Answer 2

只需將“ content ”帶入類內部，然后通過“ this.content ”將其傳遞給組件，它將起作用。