javascript - 从 Material UI 中的 TableRow 组件获取数据

Question

我在最新版本的 Material UI 中使用表格组件，但我不确定在表格行被选中时我应该如何获取数据。

文档提到了名为 onRowSelection 的 Table 组件的 prop，但它只为您提供所选行的 RowNumber，没有其他内容。

您应该如何使用它？我不明白你是怎么想捕获说...设置到 TableRow 的关键 Prop 只使用同一 TableRow 的 RowNumber Prop 。

下面的代码展示了我是如何呈现表格本身并分配键的:

handleSelect(id) {
  console.log(id);
  this.props.dispatch({ type: 'SET_SELECTED_USER', user: id });
}

renderUsers() {
  if (this.props.users && this.props.currentUser) {
    const currUser = this.props.currentUser.username;
    const userList = this.props.users.map((user) => {
      if (currUser !== user.username) {
        return (
          <TableRow key={user._id}>
            <TableRowColumn>{user.username}</TableRowColumn>
            <TableRowColumn>{user.roles[0]}</TableRowColumn>
          </TableRow>
        );
      }
    });
    return userList;
  }
}

我只是不明白当我需要访问行的键时，被选中的行的 RowNumber 应该如何帮助我。

如有任何帮助，我们将不胜感激!谢谢!

表格文档:http://www.material-ui.com/#/components/table

Answer 1

您可以使用行号作为用户数组 (this.props.users) 中的索引:

handleSelect(userIndex) {
  const currUser = this.props.currentUser.username;
  const users = this.props.users.filter(user => user.username !== currUser)
  this.props.dispatch({ type: 'SET_SELECTED_USER', user: users[userIndex].id });
}