react的onClick自動觸發等相關問題

react分頁組件遇到的問題：

  private getFirst() {
    const { pageNo } = this.state;
    if (pageNo > 3) {
      return (<span onClick={this.changePage(1)}>首頁</span>);
    } else {
      return;
    }
  }
  private changePage (index: number) {
    this.setState({ pageNo: index });
  }

這段代碼的onClick直接報錯：不能將類型“void”分配給類型“((event: MouseEvent<HTMLSpanElement>) => void) | undefined”，這個報錯看得我莫名其妙……
同事告訴我要給changePage函數加個return ()=>{}形成閉包。其實後來我才發現，雖然changePage寫得很像function，但其只是一個變量而已，所以並不滿足onClick的內容是方法的情況。

  private getFirst() {
    const { pageNo } = this.state;
    if (pageNo > 3) {
      return (<span onClick={this.changePage(1)}>首頁</span>);
    } else {
      return;
    }
  }

  private changePage (index: number) {
    return () => {this.setState({ pageNo: index });}
  }

這樣寫雖然不報錯，但有個嚴重的問題，每次生成UI時它都會自動觸發onClick，這個機制真是？？？……所以最後改成了：

  private getFirst() {
    const { pageNo } = this.state;
    if (pageNo > 3) {
      return (<span onClick={()=>this.changePage(1)}>首頁</span>);
    } else {
      return;
    }
  }
  private changePage (index: number) {
    this.setState({ pageNo: index });
  }