Office结构基本列表-如何绑定行中的按钮以发挥作用

Question

我正试图在Office UI Fabric React Basic List中的每一行上做一个按钮。按钮基本上会调用带有项目id的函数。代码如下

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

但是，当我点击图标按钮时，我一直收到下面的错误。

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中绑定函数，或使用和arow函数作为处理程序：

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

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