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 });
  }