Prime React 中的按钮 Table 不工作
Button in Prime React Table not working
我正在使用 prime react 创建一个 table,table 的最后一列用于可以在 table 上执行的操作,但是我按照文档,但 onClick 事件不适用于按钮。当我点击搜索按钮时,出现错误:"UserList.js:19 Uncaught TypeError: _this2.selectUser is not a function"
有什么线索吗?
代码:
actionTemplate(rowData, column) {
console.log('column', column);
console.log('rowData', rowData);
return (<div>
<Button
type="button" icon="fa-search"
className="ui-button-success" onClick={() => this.selectUser(1)}
/>
<Button
type="button" icon="fa-edit"
className="ui-button-warning"
/>
</div>);
}
selectUser(userId) {
console.log('selectUser');
userId = 1;
this.props.actions.fetchUser(userId);
}
renderTable() {
const paginatorLeft = <Button icon="fa-refresh" />;
/* const users = [
{ name: '1', email: '1981', updateDate: '', creationDate: '05/03/2016' },
{ name: '2', email: '1982', updateDate: '', creationDate: '04/02/2017' },
]; */
const { users } = this.props;
return (
<DataTable
value={users} paginator paginatorLeft={paginatorLeft}
rows={10} rowsPerPageOptions={[5, 10, 20]}
>
<Column field="name" header="Name" filter style={{ textAlign: 'center', width: '6em' }} />
<Column field="email" header="Email" filter style={{ textAlign: 'center', width: '6em' }} />
<Column field="lastUpdate" header="Last update" style={{ textAlign: 'center', width: '6em' }} />
<Column field="creationDate" header="Creation Date" style={{ textAlign: 'center', width: '6em' }} />
<Column body={this.actionTemplate} header="Actions" style={{ textAlign: 'center', width: '6em' }} />
</DataTable>
);
}
尝试:
<Column body={this.actionTemplate.bind(this)} header="Actions" style={{ textAlign: 'center', width: '6em' }} />
我的猜测是在另一个对象上下文中调用了 actionTemplate,这就是 selectUser
不是 defined/a 函数的原因。
我正在使用 prime react 创建一个 table,table 的最后一列用于可以在 table 上执行的操作,但是我按照文档,但 onClick 事件不适用于按钮。当我点击搜索按钮时,出现错误:"UserList.js:19 Uncaught TypeError: _this2.selectUser is not a function"
有什么线索吗?
代码:
actionTemplate(rowData, column) {
console.log('column', column);
console.log('rowData', rowData);
return (<div>
<Button
type="button" icon="fa-search"
className="ui-button-success" onClick={() => this.selectUser(1)}
/>
<Button
type="button" icon="fa-edit"
className="ui-button-warning"
/>
</div>);
}
selectUser(userId) {
console.log('selectUser');
userId = 1;
this.props.actions.fetchUser(userId);
}
renderTable() {
const paginatorLeft = <Button icon="fa-refresh" />;
/* const users = [
{ name: '1', email: '1981', updateDate: '', creationDate: '05/03/2016' },
{ name: '2', email: '1982', updateDate: '', creationDate: '04/02/2017' },
]; */
const { users } = this.props;
return (
<DataTable
value={users} paginator paginatorLeft={paginatorLeft}
rows={10} rowsPerPageOptions={[5, 10, 20]}
>
<Column field="name" header="Name" filter style={{ textAlign: 'center', width: '6em' }} />
<Column field="email" header="Email" filter style={{ textAlign: 'center', width: '6em' }} />
<Column field="lastUpdate" header="Last update" style={{ textAlign: 'center', width: '6em' }} />
<Column field="creationDate" header="Creation Date" style={{ textAlign: 'center', width: '6em' }} />
<Column body={this.actionTemplate} header="Actions" style={{ textAlign: 'center', width: '6em' }} />
</DataTable>
);
}
尝试:
<Column body={this.actionTemplate.bind(this)} header="Actions" style={{ textAlign: 'center', width: '6em' }} />
我的猜测是在另一个对象上下文中调用了 actionTemplate,这就是 selectUser
不是 defined/a 函数的原因。