ReactJS:将状态/道具传递到Reactable表行

ReactJS: Pass states/props to Reactable Table Row

本文关键字:Reactable 表行 状态 ReactJS      更新时间:2023-09-26

我正在使用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}