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

Question

我在 Material UI 的最新版本中使用 Table 组件，但我不确定应该如何从 UI 获取数据=32=] 选中时的行。

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

你应该如何使用它？我不明白你是怎么想抓住说...设置为 TableRow 的关键道具只使用相同 TableRow.

的 RowNumber 道具

下面的代码显示了我如何渲染 table 本身，并分配密钥：

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 应该如何帮助我。

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

Table 的文档：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 });
}

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

Getting data from TableRow component in Material UI

javascript

meteor

reactjs

ecmascript-6

material-ui