ReactJS:将状态/道具传递到Reactable表行
ReactJS: Pass states/props to Reactable Table Row
我正在使用Reactable库来显示React中的数据表,当我点击表中的一行时,我想设置/更改父组件UsersTable
的状态,以记住被点击记录的id,以便执行进一步的操作。不幸的是我做不到。我试图将handleClick
函数作为道具传递,但我总是得到一个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>
)},
});
如果我直接在<Tr>
元素上定义一个函数,如下所述并将row.key
记录到控制台,一切正常。但正如我所说,我需要更新父组件的状态。
任何建议都很好。
提前Thx。
您可以尝试使用fixeddatatable作为替代方案。使用onRowClick,您可以使用获取该行、索引或事件的对象
_handleRowClick: function(event, index, row ){
},
在表中,您将有onRowClick={this.__handleRowClick}
相关文章:
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 使用jquery将mysql数据获取到新的表行中
- Jquery在函数之间传递表行
- RubyonRails中的可点击表行
- 处理表行的当前子级,而不是名称或类的所有元素
- 根据Select值添加/删除表行
- 在具有命名作用域的自定义Polymer元素中隐藏表行
- 如何使用JS禁用表行,并在MYSQL中插入所选选项
- 将表行动态添加到表或tbody元素中
- 如何只使用特定的表行构建简单的手风琴
- 如何删除父表行时;删除“;在React JS中单击按钮
- jQuery根据表行传递输入值
- 如何查找一个单词在动态创建的html表行中出现的次数
- 使用jQuery插入表行
- 如何在单击单元格中的链接值时动态更改表行背景色
- 使用jquery根据数组对表行进行排序
- 在已知行权重的情况下,如何对表行进行排序
- 表行不能作为jquery请求的同级行
- 切换多个表行
- ReactJS:将状态/道具传递到Reactable表行