材料表：如何获取按钮单击的行数据？（不在行选择上）答案

【问题标题】：Material Table: How to get the row data on Button click? (Not on row selection)材料表：如何获取按钮单击的行数据？（不在行选择上）
【发布时间】：2021-10-16 19:55:18
【问题描述】：

在我的 React 组件中，我有这样的视图：

这是一个材料表。单击删除图标时，我想获取行数据。

不幸的是，我只收到一个事件，它不包含所需的信息。

这是相关代码：

class AllBooks extends React.Component {

    onDeleteButtonClick = (event, row) => {
        console.log('onDeleteButton Click!');
        console.log(event);
    }

    render() {
        return (

            <div>
                <Grid container spacing={3}>
                    <Grid item xs={6} sm={3}></Grid>
                    
                    <Grid item xs={6} sm={6}>
                        <h1 style={{textAlign: 'center'}}>All Books</h1>
                        <br /><br />

                        <TableContainer component={Paper}>
                            <Table  aria-label="simple table">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Dessert (100g serving)</TableCell>
                                        <TableCell align="right">Calories</TableCell>
                                        <TableCell align="right">Fat&nbsp;(g)</TableCell>
                                        <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                                        <TableCell align="right">Protein&nbsp;(g)</TableCell>
                                        <TableCell align="center">Actions</TableCell>
                                    </TableRow>
                                </TableHead>

                                <TableBody>
                                    {rows.map((row) => (
                                        <TableRow key={row.name}>
                                            <TableCell component="th" scope="row">
                                                {row.name}
                                            </TableCell>
                                            <TableCell align="right">{row.calories}</TableCell>
                                            <TableCell align="right">{row.fat}</TableCell>
                                            <TableCell align="right">{row.carbs}</TableCell>
                                            <TableCell align="right">{row.protein}</TableCell>
                                            <TableCell align="center">
                                        
                                                    <IconButton onClick={this.onDeleteButtonClick}>
                                                        <DeleteIcon style={{ color: 'red' }}/>
                                                    </IconButton>
                                                    <IconButton>
                                                        <AddCircleOutlineIcon />
                                                    </IconButton>

                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </Grid>

                    <Grid item xs={6} sm={3}></Grid>
                </Grid>
            </div>
    )
    }

}

如何获取行数据？非常感谢您的每一个帮助！

【问题讨论】：

您可以将该行传递给您的删除处理程序onClick={() => this.onDeleteButtonClick(row) }

标签： javascript reactjs material-ui

【解决方案1】：

像这样在 JSX 中的 delete 回调中传递你的行对象

 <IconButton onClick={() => this.onDeleteButtonClick(row) }>
     <DeleteIcon style={{ color: 'red' }}/>
 </IconButton>

或者，您也可以使用 bind，

<IconButton onClick={this.onDeleteButtonClick.bind(this, row)}>
     <DeleteIcon style={{ color: 'red' }}/>
 </IconButton>

【讨论】：