Question

我在我的项目中使用Material-ui并且我遇到了一个问题。

我想使用Table组件来显示动态的项目列表，每行都有复选框。

这就是我的渲染图：

<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也是如此：

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，我可以看到每个人都从displayRowCheckbox=true收到道具TableBody。

所以我无法弄清楚为什么我的复选框不显示。有什么想法吗？

Answer 1

我遇到了同样的问题......（使用material-ui@0.14.4）

显然，材料-ui TableBody将复选框组件推送到其子组件中。您需要从自定义TableRow道具中获取它并在自定义TableRow render（）方法中显式呈现它。

注意：您需要将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不会显示复选框

1 个答案: