Office Fabri c Basi c Список - как связать кнопки в строках, чтобы функционировать? - PullRequest
Новая
       50

Office Fabri c Basi c Список - как связать кнопки в строках, чтобы функционировать?

0 голосов
/ 09 марта 2020

Я пытаюсь сделать кнопку для каждой строки в пользовательском интерфейсе Office. Fabri c React Basi c Список. Кнопка будет в основном вызывать функцию с идентификатором элемента. Код выглядит так: 

<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)

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

1 Ответ

0 голосов
/ 12 марта 2020

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

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

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