Material-ui

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

我的 Table 渲染效果很好，我可以毫无问题地通过单击多 select 行。但是我的 none 行显示 selection 的复选框，即使通过将父属性传递给 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，我可以看到他们每个人都从 TableBody.

收到道具 displayRowCheckbox=true

所以我不明白为什么我的复选框没有出现。有什么想法吗？

Answer 1

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

显然 material-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 不会显示复选框

Material-ui - TableRow wrapped in component wont show checkbox

reactjs