我正在使用 Material UI Datagrid 來顯示一些資料。 其中一列顯示一個鏈接,可在另一個標籤中開啟 URL。 在單擊的行上,我想導航到另一個頁面,但在單擊連結時我不想導航到另一個頁面。
我可以簡單地停用連結整個單元格上的點擊行為,但這並不是完全理想的。您是否知道一種解決方案,可以以某種方式阻止從連結的 onClick
內執行 onRowClicked
?
我正在使用的簡化範例:
<DataGrid columns={[ { flex: 200, field: 'name', headerName: 'Naam' }, { flex: 250, field: 'url', headerName: 'Link', renderCell: (cell: GridCellParams) => ( <Box width="100%" overflow="scroll"> <Link href={cell.value} target="_blank" > Click here </Link> </Box> ), }, ]} onRowClicked={(row) => { navigate(Routes.OTHER_PAGE.replace(':id', row.id)) }} rows={rows} />
將
onClick={(event) => event.stopPropagation()}
加入連結即可解決此問題。