Material UI DataGrid：点击链接时阻止onRowClicked触发的方案咨询

直接在Link组件的onClick事件中调用event.stopPropagation()即可阻止事件冒泡到行的点击回调，这样点击链接时只会触发链接本身的新标签页跳转行为，不会触发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"
                        onClick={(e) => {
                            // 阻止事件冒泡到行级点击事件
                            e.stopPropagation();
                        }}
                    >
                        Click here
                    </Link>
                </Box>
            ),
        },
    ]}
    onRowClicked={(row) => {
        navigate(Routes.OTHER_PAGE.replace(':id', row.id))
    }}
    rows={rows}
/>

原理说明 #

浏览器事件传播遵循冒泡机制：点击Link时，事件会从Link元素向上冒泡到父级单元格，再到行元素。stopPropagation()方法会终止事件的进一步传播，因此行的onRowClicked回调不会被触发，同时Link自身的跳转行为不受影响。

如果遇到特殊场景下stopPropagation()不生效的情况，可以尝试使用e.stopImmediatePropagation()——它不仅阻止事件冒泡，还会阻止当前元素上后续注册的同类型事件执行，但绝大多数场景下stopPropagation()就足够解决问题。

内容的提问来源于stack exchange，提问作者Wouter Lemcke