React Material UI表无法从行获取元素 [英] React material ui table can't get element from row
问题描述
我想使用材料ui库中的表进行react: http://www.material-ui.com/#/components/table
I want to use a table from the material ui library for react : http://www.material-ui.com/#/components/table
我显示它,它工作得很好,我试图获取与所选行相关联的对象,但是我没有找到实现此目的的方法,我看到了属性children
或onRowSelection
,但是我无法得到我的对象,这是我的代码.
如何获得所选行的整个对象?
I display it, it works very well, I m trying to get the object associated with the row I selected, but I don't find the way to do that, I saw the property children
or onRowSelection
but I can't get my object here is my code.
How can I get the entire object of my selected line ?
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 = {
};
推荐答案
更新:对于material-ui 0.15.4,传递给onRowSelection处理程序的参数已更改.请参阅@Jonathn的答案,以了解今后的正确用法.
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
is a property of <Table>
not <TableRow>
. Also, it doesn't call the handler with an event when called (e
), rather, it will call it with the key. You can then use that to find the row. Like so:
_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>
);
}
这篇关于React Material UI表无法从行获取元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!