I'm using the Reactable library to display data tables in React and I want to set/change the state of my parent component UsersTable
, when I click on a row in the table, to remember the id of the clicked record for further actions. Unfortunately I cant' get it done. I try to pass the handleClick
function as a prop but I always get an Uncaught TypeError:
and handleClick
is undefined.
我正在使用Reactable库在React中显示数据表,我想设置/更改我的父组件UsersTable的状态,当我单击表中的一行时,要记住所单击记录的id以便进一步操作。不幸的是我不能完成它。我尝试将handleClick函数作为prop传递,但我总是得到一个Uncaught TypeError:并且handleClick未定义。
var Table = Reactable.Table;
var Tr = Reactable.Tr;
var Td = Reactable.Td;
var UsersTable = React.createClass({
propTypes: {
users: React.PropTypes.array.isRequired,
},
handleClick: function(row) {
this.setState({userId: row.key})
},
getInitialState: function() {
return {
userId: null
};
},
render: function() {
return (
<div className="usersTable">
<div className="globalUserSearch">
<div className="globalUserSearchLabel">Selection:</div>
<div><input type="text" className="userSearchInput" placeholder="Global Search"></input></div>
</div>
<Table className="table" itemsPerPage={5} sortable={true} handleClick={this.handleClick}>
{this.props.users.map(function(row) {
return (
<Tr key={row.key} onClick={this.props.handleClick.bind(this, row)}>
<Td column="username">{row.personalInformation.username}</Td>
<Td column="firstname">{row.personalInformation.firstname}</Td>
<Td column="lastname">{row.personalInformation.lastname}</Td>
</Tr>
)
})}
</Table>
</div>
)},
});
If I define a function directly at the <Tr>
element as it's described here and log the row.key
to the console, everything is fine. But as I said, I need to update the state of my parent component.
如果我直接在元素定义一个函数,如此处所述,并将row.key记录到控制台,一切都很好。但正如我所说,我需要更新我的父组件的状态。
Any suggestions would be great.
任何建议都会很棒。
Thx in advance.
Thx提前。
1 个解决方案
#1
0
You could try fixeddatatable as an alternative. Use the onRowClick and you can get the object for that row, index, or event using
您可以尝试使用fixeddatatable作为替代方案。使用onRowClick,您可以使用该行,索引或事件获取对象
_handleRowClick: function(event, index, row ){
},
In Table you'll have onRowClick={this.__handleRowClick}
在表中你将有onRowClick = {this .__ handleRowClick}
#1
0
You could try fixeddatatable as an alternative. Use the onRowClick and you can get the object for that row, index, or event using
您可以尝试使用fixeddatatable作为替代方案。使用onRowClick,您可以使用该行,索引或事件获取对象
_handleRowClick: function(event, index, row ){
},
In Table you'll have onRowClick={this.__handleRowClick}
在表中你将有onRowClick = {this .__ handleRowClick}