Material UI React Table onCellClick 在 TableRow 上不起作用

Question

我的反应组件中有材料 UI 表。我想将 onCellClick 事件添加到表的每一行。但是当我将 onCellClick 添加到每个 TableRow 时，它不会被触发。但是当我将它添加到我的表格标签时，它就会被解雇。问题是当我将它添加到表标签时，只能对所有行采取一种类型的操作。如果我想在每次单击时对每一行做不同的事情怎么办。这就是为什么我希望所有 TableRow 标记都有自己的 onClick 类型的事件。我怎样才能做到这一点？

这是我在表格标签上带有 onCellClick 事件的代码，这是我不想要的。

class TagDetailTable extends Component {
        handleButtonClick() {
            browserHistory.push("TagList")
        }

        handleCellClick(){
            console.log("cell clicked")
        }

        render() {
            return (
                <MuiThemeProvider>
                <div>
                    <Table onCellClick= {this.handleCellClick}>
                        <TableHeader>
                            <TableRow>
                                <TableHeaderColumn>ID</TableHeaderColumn>
                                <TableHeaderColumn>Type</TableHeaderColumn>
                                <TableHeaderColumn>Category</TableHeaderColumn>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            <TableRow>
                                <TableRowColumn>1</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>2</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>3</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>4</TableRowColumn>
                                <TableRowColumn>Alcohol</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>5</TableRowColumn>
                                <TableRowColumn>Alcohol</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            {/*<TableRow>*/}
                                {/*<TableRowColumn>4</TableRowColumn>*/}
                                {/*<TableRowColumn>Alcohol</TableRowColumn>*/}
                                {/*<TableRowColumn>Compliance</TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow>*/}
                                {/*<TableRowColumn>4</TableRowColumn>*/}
                                {/*<TableRowColumn>Alcohol</TableRowColumn>*/}
                                {/*<TableRowColumn>Compliance</TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow>*/}
                                {/*<TableRowColumn>4</TableRowColumn>*/}
                                {/*<TableRowColumn>Alcohol</TableRowColumn>*/}
                                {/*<TableRowColumn>Compliance</TableRowColumn>*/}
                            {/*</TableRow>*/}
                        </TableBody>
                    </Table>
                    <div className="backButton">
                        <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick}
                                      labelColor="white">

                        </RaisedButton>
                    </div>
                </div>
                </MuiThemeProvider>

            );
        }
    }

Answer 1

对于那些在 2019 年底寻找这个的人来说，这对我不起作用。 目前你可以只在 TableCell 或 TableRow 上放 onClick 例如

<TableCell
  key={column.id}
  align={column.align}
  onClick={() => handleClick(row.id)}
>

Answer 2

不支持将 OnCellClick 附加到行。详情请见https://github.com/callemall/material-ui/issues/2819。

但是，您可以使用handleCellClick 的函数参数。接收事件的函数的签名是：

handleCellClick(row,column,event)
{
    if(row ==0)
       console.log('Cigarette row clicked');

}

Answer 3

export interface TableRowProps {
        // <tr/> is element that get the 'other' properties
        className?: string;
        displayBorder?: boolean;
        hoverable?: boolean;
        hovered?: boolean;
        /** @deprecated Instead, use event handler on Table */
        onCellClick?(e: React.MouseEvent<{}>, row: number, column: number): void;
        /** @deprecated Instead, use event handler on Table */
        onCellHover?(e: React.MouseEvent<{}>, row: number, column: number): void;
        /** @deprecated Instead, use event handler on Table */
        onCellHoverExit?(e: React.MouseEvent<{}>, row: number, column: number): void;
        /** @deprecated Instead, use event handler on Table */
        onRowClick?(e: React.MouseEvent<{}>, row: number): void;
        /** @deprecated Instead, use event handler on Table */
        onRowHover?(e: React.MouseEvent<{}>, row: number): void;
        /** @deprecated Instead, use event handler on Table */
        onRowHoverExit?(e: React.MouseEvent<{}>, row: number): void;
        rowNumber?: number;
        selectable?: boolean;
        selected?: boolean;
        striped?: boolean;
        style?: React.CSSProperties;
    }
export class TableRow extends React.Component<TableRowProps> {
    }

我在<TableRow/> 上使用了一个onRowClick 函数，而不是在Table 本身上定义处理程序。虽然它已被弃用，因此解决方案可能不可靠。我用过material-ui v0.20，所以不确定它是否仍然有效，但你可以试一试。