Die Linkspalte des Material-UI-Datagrids stoppt, wenn auf die Zeile geklickt wird

Question

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}
/>

Answer 1

将 onClick={(event) => event.stopPropagation()} 添加到链接即可解决此问题。