La colonne de lien Material UI Datagrid s'arrête surRowClicked

Question

J'utilise Material UI Datagrid pour afficher certaines données. L'une des colonnes affiche un lien qui ouvre l'URL dans un autre onglet. Sur la ligne cliquée, je souhaite accéder à une autre page, mais lorsque l'on clique sur le lien, je ne souhaite pas accéder à une autre page.

Je pourrais simplement désactiver le comportement de clic du lien sur toute la cellule, mais ce n'est pas tout à fait idéal. Connaissez-vous une solution qui peut bloquer d'une manière ou d'une autre onClick 内执行 onRowClicked les liens ?

Exemple simplifié que j'utilise :

<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

Ajoutez onClick={(event) => event.stopPropagation()} au lien pour résoudre ce problème.