Блог

У меня есть эта функция:

 const DataEdit = ({id}) =gt; {  console.log(id) }  

и этот столбец внутри моей сетки данных(импортирован из @miu/x-data-grid): {

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

по какой-то причине функция DataEdit отправляет журнал консоли для каждой строки в сетке данных на странице, прежде всего, почему это так? во-вторых, как я могу заставить его работать только тогда, когда я нажимаю кнопку значка. Заранее спасибо.

Как вы его создали, это обычная функция, поэтому она будет загружена в стек и выполнена в виде отрисовки компонентов (она вернет значение onClick). С другой стороны, если вы перепишете его как:

 onClick ={() =gt; DataEdit(params)}  

он создаст функцию DataEdit и назначит ее onClick, таким образом, она будет выполняться только при нажатии.