[英]Material Table: How to get the row data on Button click? (Not on row selection)
在我的 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 (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (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>
)
}
}
我該怎么做才能獲取行數據? 非常感謝您的幫助!
像這樣在 JSX 內部的刪除回調中傳遞你的行 object
<IconButton onClick={() => this.onDeleteButtonClick(row) }>
<DeleteIcon style={{ color: 'red' }}/>
</IconButton>
或者,您也可以使用綁定,
<IconButton onClick={this.onDeleteButtonClick.bind(this, row)}>
<DeleteIcon style={{ color: 'red' }}/>
</IconButton>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.