函数在数据网格中的每一行调用，虽然我想在react中只调用它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中的每一行发送控制台日志，首先，为什么会这样?其次，我如何才能使它工作，只有当我点击图标按钮。提前谢谢。

Answer 1

当您创建它时，它是一个正常的函数，因此它将被加载到堆栈中并作为组件渲染执行(它将返回值给onClick)。另一方面，如果重写为:

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

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