Ich verwende Material UI Datagrid, um einige Daten anzuzeigen. In einer der Spalten wird ein Link angezeigt, der die URL in einer anderen Registerkarte öffnet. In der angeklickten Zeile möchte ich zu einer anderen Seite navigieren, aber wenn auf den Link geklickt wird, möchte ich nicht zu einer anderen Seite navigieren.
Ich könnte einfach das Klickverhalten des Links auf der gesamten Zelle deaktivieren, aber das ist nicht ganz ideal. Kennen Sie eine Lösung, die onClick
内执行 onRowClicked
irgendwie von Links blockieren kann?
Vereinfachtes Beispiel, das ich verwende:
<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()}
添加到链接即可解决此问题。