Die Linkspalte des Material-UI-Datagrids stoppt, wenn auf die Zeile geklickt wird
P粉208469050
P粉208469050 2023-09-16 19:17:00
0
1
550

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

P粉208469050
P粉208469050

Antworte allen(1)
P粉736935587

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage