Базовый список Office Fabric - как привязать кнопку в строках к работе?

Question

Я пытаюсь сделать кнопку в каждой строке в базовом списке Office UI Fabric React Basic. Кнопка в основном вызывает функцию с идентификатором элемента. Код такой

<List
  items = {this.state.relatedQuestions}
   onRenderCell = {this._onRenderListCell}
/>

private _onRenderListCell(relatedQuestion: IRelatedQuestion, index:number | undefined): JSX.Element {
   return (
      <div>
         <IconButton iconProps={deleteIcon} title="Remove" onClick={() => {this._removeRelatedQuestion(relatedQuestion.Id);}} /> 
         <Text>
            { relatedQuestion.Question }
         </Text>
      </div>
   );
}

private _removeRelatedQuestion(itemId: number) {
   alert(`Item id ${itemId}`);
   // actual code will be written later
}

Но при нажатии на кнопку IconButton я продолжаю получать сообщение об ошибке ниже.

Uncaught TypeError: Cannot read property '_removeRelatedQuestion' of undefined
    at Object.onClick (Faq.tsx:600)
    at BaseButton._this._onClick (BaseButton.js:191)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
    at executeDispatch (react-dom.development.js:584)
    at executeDispatchesInOrder (react-dom.development.js:609)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)

Как я могу привязать кнопку в каждой строке основного списка к функции?

Answer 1

Свяжите свою функцию в cunstructor или используйте функцию and arow в качестве обработчика:

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

handleChange = () => {
  // call this function from render 
  // and this.whatever in here works fine.
};