React material ui table 无法从行中获取元素

Question

我想使用 material ui 库中的 table 进行反应： http://www.material-ui.com/#/components/table

我显示它，效果很好，我试图获取与我选择的行相关联的对象，但我找不到方法，我看到属性 children 或 onRowSelection 但我无法在此处获取我的对象是我的代码。如何获取所选行的整个对象？

import React, { PropTypes, Component } from 'react'

import Table from 'material-ui/lib/table/table';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRow from 'material-ui/lib/table/table-row';
import TableHeader from 'material-ui/lib/table/table-header';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import TableBody from 'material-ui/lib/table/table-body';


export default class MagicTableReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
            fixedHeader: true,
            fixedFooter: true,
            stripedRows: false,
            showRowHover: true,
            selectable: true,
            multiSelectable: false,
            enableSelectAll: false,
            deselectOnClickaway: true,
            height: '300px',
        };
    };


    _onRowSelection(e){
        console.log(e)

    }


    render() {

        return (

            <div>
                <div className="col-sm-6">
                    <h1>MagicTableReact</h1>
                    <Table
                        height={this.state.height}
                        fixedHeader={this.state.fixedHeader}
                        fixedFooter={this.state.fixedFooter}
                        selectable={this.state.selectable}
                        multiSelectable={this.state.multiSelectable}
                        >
                        <TableHeader>
                            <TableRow>
                                <TableHeaderColumn>ID</TableHeaderColumn>
                                <TableHeaderColumn>Name</TableHeaderColumn>
                            </TableRow>
                        </TableHeader>
                        <TableBody
                        >
                            {this.state.data.map((user, i) =>
                                <TableRow key={i}
                                    onRowSelection={this._onRowSelection.bind(this)}>
                                    <TableRowColumn>{user.id}</TableRowColumn>
                                    <TableRowColumn>{user.name}</TableRowColumn>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        )
    }
}

MagicTableReact.propTypes = {

};

Answer 1

UPDATE: With material-ui 0.15.4, the parameters passed to the onRowSelection handler have been changed. See answer from @Jonathn for correct usage going forward.

onRowSelection 是 <Table> 的属性而不是 <TableRow>。此外，它在调用 (e) 时不会使用事件调用处理程序，而是使用键调用它。然后您可以使用它来查找该行。像这样：

_onRowSelection(key) {
  console.log(key, this.state.data[key])
},

getInitialState() {
  return {
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
    fixedHeader: true,
    fixedFooter: true,
    stripedRows: false,
    showRowHover: true,
    selectable: true,
    multiSelectable: false,
    enableSelectAll: false,
    deselectOnClickaway: true,
    height: '300px',
  };
},

render() {
  return (
    <div>
      <div className="col-sm-6">
        <h1>MagicTableReact</h1>
        <Table
          height={this.state.height}
          fixedHeader={this.state.fixedHeader}
          fixedFooter={this.state.fixedFooter}
          selectable={this.state.selectable}
          multiSelectable={this.state.multiSelectable}
          onRowSelection={this._onRowSelection}
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
          >
            {this.state.data.map((user, i) =>
              <TableRow key={i} value={user}>
                <TableRowColumn>{user.id}</TableRowColumn>
                <TableRowColumn>{user.name}</TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

Answer 2

Using [Material-UI 0.15.4]

onRowSelection 仅 returns none、all 或包含所选行的行号的数组。

使用onCellClick，也在<Table>水平，returnsrowNumber，columnNumber和event。此事件包含 target 下的 table 单元格，您可以从那里引用 data- 标签等。

示例：

function handleCellClick (rowNumber, columnNumber, evt) {
  console.log("activityId", evt.target.dataset.myRowIdentifier);
}

function createTableRow (content) {
  let activityId = content.shift();
  return (
    <TableRow key={activityId}>
      {content.map((columnContent, i) => {
        return (
          <TableRowColumn key={i} data-my-row-identifier={activityId} >{columnContent}</TableRowColumn>
        );
      })}
    </TableRow>
  );
}

return (
  <div>
    <Table onCellClick={handleCellClick}>
      <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      {createHeaderRow(tableHeader)}
      </TableHeader>
      <TableBody displayRowCheckbox={false}>
      {filteredTable.map(createTableRow)}
      </TableBody>
    </Table>
  </div>
);

我在 Whosebug 上的第一个回答...希望对您有所帮助:-)

Answer 3

<Table onCellClick={(row, col, event) => console.log(event.target.innerHTML)}>

Answer 4

您可以使用您的初始数据数组并根据行号引用索引来访问您选择的行和与之关联的对象。这是一个基本示例，显然取决于您要对数据执行的操作，您可能需要添加更多逻辑。

_onRowSelection(rows) {
    for (let i = 0; i < rows.length; i++) {
        console.log(this.state.data[rows[i]])
    }
},

getInitialState() {
  return {
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}]
  };
},

render() {
  return (
    <div>
      <div className="col-sm-6">
        <h1>MagicTableReact</h1>
        <Table onRowSelection={(rows) => this._onRowSelection(rows)}>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
          >
            {this.state.data.map((user, i) =>
              <TableRow key={i} value={user}>
                <TableRowColumn>{user.id}</TableRowColumn>
                <TableRowColumn>{user.name}</TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

React material ui table 无法从行中获取元素

React material ui table can't get element from row

reactjs

material-ui