reactjs – React材料ui表无法从行中获取元素

发布时间：2020-12-15 20:30:30 所属栏目：百科来源：网络整理

导读：我想使用材料ui库中的表做出反应： http://www.material-ui.com/#/components/table 我显示它,它工作得很好,我试图获取与我选择的行相关联的对象,但我找不到这样做的方法,我看到属性children或onRowSelection但我无法得到我的对象这是y代码. 如何获取所选行

我想使用材料ui库中的表做出反应：
http://www.material-ui.com/#/components/table

我显示它,它工作得很好,我试图获取与我选择的行相关联的对象,但我找不到这样做的方法,我看到属性children或onRowSelection但我无法得到我的对象这是y代码.
如何获取所选行的整个对象？

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 = {

};

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!