Material UI React Table on CellClick不适用于TableRow

Question

我的react组件中有材质UI表。我想将onCellClick事件添加到表的每一行中。但当我向每个TableRow添加onCellClick时，它不会被解雇。但当我把它添加到我的表标签中时，它就会被解雇。这样做的问题是，当我将它添加到Table标记时，所有行只能执行一种类型的操作。如果我想在每次单击每一行时对它们执行不同的操作，该怎么办。这就是为什么我希望所有TableRow标记都有自己的onClick类型的事件。我该怎么做？

这是我在TableTag上使用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例如

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

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