网格内的 SharePoint Framework React Button 调用（循环）

Question

我有一个 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)

Answer 1

这一行：

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

注意 function 关键字。函数体内部的 this 与外部指向的 this 不同。这就是为什么您会观察到 this._handleClick 的两种用法之间的不同行为。 ^{(further reading)}

解决此问题的最简单（也可能是最好）方法是将 function use 替换为 ES6 "arrow function"。 ^{(further reading)} 看起来像这样：

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

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

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

网格内的 SharePoint Framework React Button 调用（循环）

SharePoint Framework React Button call within grid (loop)

javascript

reactjs

sharepoint

sharepointframework