为数据网格中的每一行调用的函数，尽管我只想在反应中调用它 onClick

Question

我得到了这个功能：

const DataEdit = ({id}) => {
    console.log(id)
}

我的 DataGrid 中的这一列（从@miu/x-data-grid 导入）： {

    field:'Delete',
    headerName:'Delete',
    width:100,
    sortable:false,
    disableClickEventBubbling:true,
    renderCell: (params) => {
        return( 
            <div>
                <IconButton
                aria-label="add an alarm"
                onClick ={DataEdit(params)}
                >
                    <Delete
                    color="error"
                    style={{cursor:'pointer'}}
                    />
                </IconButton>
            </div>
        )
    }
},

出于某种原因，DataEdit 函数会为页面中 DataGrid 中的每一行发送控制台日志，首先，这是为什么？其次，如何才能使其仅在单击 IconButton 时才起作用。提前致谢。

Answer 1

在您创建它时，它是一个普通函数，因此它将加载到堆栈中并作为组件渲染执行（它将 return 值赋给 onClick）。另一方面，如果您将其重写为：

onClick ={() => DataEdit(params)}

它会创建一个DataEdit函数并将其赋值给onClick，因此只有在点击时才会执行。

为数据网格中的每一行调用的函数，尽管我只想在反应中调用它 onClick

function called for every row in the datagrid although I want to call it only onClick in react

datagrid

reactjs

material-ui

react-hooks