Вызов кнопки SharePoint Framework React внутри сетки (цикл)

Question

У меня есть веб-часть с кнопкой в ​​сетке, которая создается с помощью функции отображения.Первое, что я делаю, это связываю:

    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. ^{(дальнейшее чтение)}

Самый простой (и, вероятно, лучший) способ решить эту проблему - заменить function на ES6 "функция стрелки". ^{(дальнейшее чтение)} Это будет выглядеть так:

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

Функции стрелок сохраняют значение this окружающей лексической области видимости - это означает, что this._handleClickбудет по-прежнему доступен для вас из тела функции.

Примечание: инструментальная цепочка SPFx переносит функции стрелок в ES5 function s в дистрибутивах, поэтому вам не нужно беспокоиться о совместимости ES6.