Question

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

这是我在Table Tag上使用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

不支持将OnCellClick附加到Row。有关详细信息，请参阅https://github.com/callemall/material-ui/issues/2819。

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

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

}

Answer 2

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/>函数，而不是在Table本身上定义处理程序。不过已弃用，因此解决方案可能不可靠。我已经使用了material-ui v0.20，所以不确定它是否仍然有效，但是您可以尝试一下。

Answer 3

对于那些在2019年底寻找此商品的人来说，这对我不起作用。目前，您只需在TableCell或TableRow上单击即可例如

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

材料UI反应表onCellClick不能在TableRow上工作

3 个答案: