javascript - Getting data from TableRow component in Material UI - Stack Overflow

admin管理员组

文章数量:1356271

I'm using a Table ponent in the newest version of Material UI, and I'm not sure how I'm supposed to be acquiring data from a Table's row when it's selected.

The documentation mentions a prop for the Table ponent called onRowSelection, but it only gives you a RowNumber for the row that was selected, nothing else.

How are you supposed to make any use of this at all? I don't understand how you're meant to grab say...the key prop that's set to the TableRow using nothing but the RowNumber prop of that same TableRow.

Code below shows how I'm rendering the table itself, and assigning the key:

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;
  }
}

I just don't understand how the RowNumber of the row being selected is supposed to help me whatsoever, when I need to access they key of the row instead.

Any assistance would be really appreciated! Thanks!

Docs for Table:

I'm using a Table ponent in the newest version of Material UI, and I'm not sure how I'm supposed to be acquiring data from a Table's row when it's selected.

The documentation mentions a prop for the Table ponent called onRowSelection, but it only gives you a RowNumber for the row that was selected, nothing else.

How are you supposed to make any use of this at all? I don't understand how you're meant to grab say...the key prop that's set to the TableRow using nothing but the RowNumber prop of that same TableRow.

Code below shows how I'm rendering the table itself, and assigning the key:

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;
  }
}

I just don't understand how the RowNumber of the row being selected is supposed to help me whatsoever, when I need to access they key of the row instead.

Any assistance would be really appreciated! Thanks!

Docs for Table: http://www.material-ui./#/ponents/table

• javascript
• meteor
• reactjs
• ecmascript-6
• material-ui

Share Improve this question Follow asked May 18, 2016 at 16:46 MisutoWolfMisutoWolf 1,24311 gold badge2020 silver badges3333 bronze badges 4

• Is the same question answered here? stackoverflow./questions/36656447/… – Marc Commented May 18, 2016 at 16:58
• In a way, I guess...but my problem seems to be that, contrary to how that question is replied, the key prop isn't what's being used to identify the row being selected when using onRowSelection. Instead, some abritrary rowNumber property is automatically generated by Table and is used, which is not helpful at all, when I actually need it to be using the key prop as suggested by that question/answer. – MisutoWolf Commented May 18, 2016 at 17:16
• You can populate the key value with whatever you want. Look at the row creation .map in the example in that linked question/answer. You can even link to the full object. Does that help? – Larry Maccherone Commented May 18, 2016 at 17:22
• I don't know. The problem isn't being able to stick whatever values I want in the key/value props for the rows as they're created. The problem is that when I go to trigger the selection of said rows, I don't understand how I'm supposed to access those props, when you're only able to pass one parameter (I guess?) into the function that gets called when triggering onRowSelection. Unless I'm wrong, and my code for handleSelect above could be something like function handleSelect(row, key) ... – MisutoWolf Commented May 18, 2016 at 17:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could use the row number as an index in your users array (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 });
}

本文标签： javascriptGetting data from TableRow component in Material UIStack Overflow