Material-ui-封装在组件中的TableRow不会显示复选框

问题描述

我在项目中使用Material-ui，但遇到了问题.

I'm using Material-ui in my project and I'm facing an issue.

我想使用Table组件显示每行带有复选框的动态项目列表.

I would like to use Table component to show a dynamic list of items with checkbox on each row.

这就是我的渲染图:

<Table multiSelectable={true}>
    <TableHeader>
        <TableRow>
            <TableHeaderColumn>Reference</TableHeaderColumn>
                .... All others columns ...
            <TableHeaderColumn>Actions</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={ true }>
        { this.generateOrderRows() }
    </TableBody>
</Table>

generateOrderRows()方法:

generateOrderRows() {
    var rows = [];
    if (this.state.orders) {
        this.state.orders.map(function(order) {
            rows.push(<OrderListRow key={order._id} order={order} selected={false}/>);
        });
    }
    if (rows.length == 0) {
        rows.push(<tr key="1"><td className="text-center" colSpan="9">It seems there is no results... :'(</td></tr>);
    }
    return rows;
}

我的表格呈现效果很好，我可以通过单击它来选择多行而没有任何问题.但是我的所有行都没有显示该选择的复选框，即使这样将父项道具传递给TableRow:

My Table rendering well and I'm able to multi-select rows by clicking on it without any problems.But none of my rows display the checkbox for the selection, even by passing parent props to TableRow like this :

render() {
    const { order, ...otherProps } = this.props;
    return(
        <TableRow { ...otherProps }>
            <TableRowColumn>{ order.reference }</TableRowColumn>
                ... All others columns ...
            <TableRowColumn>
                <RaisedButton label="View" primary={true} linkButton={true} href={ '/order/' + order._id }/>
            </TableRowColumn>
        </TableRow>
    );
}

如果我用React Dev Tools检查我的TableRows，我可以看到他们每个人都从TableBody收到了道具displayRowCheckbox=true.

If I inspect my TableRows with the React Dev Tools, I can see that each of them receive the prop displayRowCheckbox=true from TableBody.

所以我不知道为什么我的复选框不显示.有任何想法吗?

So I can't figure out why my checkboxes dont show up. Any Idea ?

推荐答案

我遇到了同样的问题...(使用[email protected])

I hit the same issue... (using [email protected])

显然，material-ui TableBody将复选框组件推入其子级.您需要从自定义TableRow道具中获取它，并在自定义TableRow render()方法中显式呈现它.

Apparently material-ui TableBody pushes the checkbox component into its children. You need to grab it from your custom TableRow props and render it explicitly in your custom TableRow render() method.

注意:您需要同时将otherProps传播到TableRow中并显式呈现该复选框.

// OrderListRow...
render() {
    const { order, ...otherProps } = this.props;
    return(
        <TableRow { ...otherProps }>
            {otherProps.children[0] /* checkbox passed down from Table-Body*/}
            <TableRowColumn>{ order.reference }</TableRowColumn>
                ... All others columns ...
            <TableRowColumn>
                <RaisedButton label="View" primary={true} linkButton={true} href={ '/order/' + order._id }/>
            </TableRowColumn>
        </TableRow>
    );
}

https://github.com/callemall/material-ui/issues/1749#issuecomment -217667754 https://github.com/callemall/material-ui/blob/master/src/Table/TableBody.js#L173

这篇关于Material-ui-封装在组件中的TableRow不会显示复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！