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的使用替换为ES6“箭头功能”。 ^{(further reading)}看起来像这样：

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

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

侧面说明：SPFx工具链将箭头功能转换为可分发内容中的ES5 function，因此您不必担心ES6的兼容性。

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

1 个答案: