1

我有一个在网格内有一个按钮的 Web 部件，它是通过映射函数创建的。我要做的第一件事是绑定：

    constructor(props: IPageApprovalProps) {
       super(props);
       this._handleClick = this._handleClick.bind(this); 
     }

我的事件处理程序，现在，只是登录到控制台

private _handleClick() {
    console.log('fired!');

  }

最后，这是渲染：

public render(): React.ReactElement<IPageApprovalProps> {


     return (
          //code above here
          <button className="ms-Button ms-Button--primary root-82" onClick={() => this._handleClick()}>Approve</button>
          {this.props.approvers.map(function(item,key){ 
          return(<div className={styles.rowStyle} key={key}>
            <div className={styles.CellWideStyle}>
              {item.Name}
            </div>
            <div className={styles.CellWideStyle}>
              {<condition> ? 
                (<button className="ms-Button ms-Button--primary root-82" onClick={() => this._handleClick()}>Approve</button>) : 
                (<image>)
              }
            </div>
      );
}

这里有两个按钮 - 一个在循环外，一个在循环内。第一个开火，但第二个抛出：

Uncaught TypeError: Cannot read property '_handleClick' of undefined
    at onClick (page-approval-web-part_d7b27412e020f7f53abca90c271be557.js:1)
    at Object.o (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
    at Object.invokeGuardedCallback (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:887)
    at Object.invokeGuardedCallbackAndCatchFirstError (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:887)
    at s (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
    at p (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
    at m (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
    at d (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
    at v (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
    at y (sp-pages-assembly_en-us_fd7935d40583aa7d6c88123f98f14171.js:879)
4

1 回答 1

1

在这一行：

          {this.props.approvers.map(function(item,key){

注意function关键字。thisfrom 函数体内部的指向与函数体this外部不同。这就是为什么您观察到this._handleClick. （进一步阅读）

解决这个问题的最简单（可能也是最好的）方法是function用 ES6“箭头函数”替换 use 。（进一步阅读）它看起来像这样：

          {this.props.approvers.map((item,key) => {

箭头函数保留this周围词法范围的值——这意味着this._handleClick您仍然可以从函数体内部访问。

旁注：SPFx 工具链将箭头函数转换function为可分发文件中的 ES5，因此您不必担心 ES6 兼容性。

于 2019-01-28T21:52:32.087 回答