material-ui DataGrid — как отделить выбор флажка строки от onRowClick

Question

Я использую DataGrid для управления конфигурацией службы. Я хотел бы использовать автоматически сгенерированные флажки строк для управления несколькими операциями удаления, но хотел бы использовать событие onRowClick для подачи данных строки в модальную диалоговую форму для редактирования. Мой обработчик onRowClick отлично работает и заполняет модальное окно именно так, как я хочу. К сожалению, щелчок по строке также выбирает строку — другими словами, флажок для строки, по которой щелкнули, устанавливается. Я хотел бы, чтобы строка выбиралась только при нажатии самого флажка, а не при нажатии строки.

Моя декларация DataGrid выглядит так.

                          <DataGrid 
                        columns={this.columns} 
                        rows={fmConfigs}                              
                        pageSize={10} 
                        checkboxSelection 
                        autoHeight
                        onRowClick={(rowData) => this.handleClickOpenFmConfigForm(rowData.row)} 
                />

Обычно я ожидал бы, что у обработчика onRowClick будет второй аргумент для представления события, поэтому я мог бы вызвать что-то вроде e.stopPropagation(), но передается только объект типа GridRowParams, для которого нет документации. Я надеялся, что, возможно, объект события был где-то там зарыт, но я не могу его найти. Когда я вывожу объект на консоль, я вижу, что данных много — именно так я смог найти данные строки, которые мне нужно было передать в мою форму, — но я не вижу события.

Кто-нибудь знает, как это можно сделать?

Answer 1

добавлять disableSelectionOnClick={true}к DataGridкомпонент и, согласно документу , выбор при нажатии на строку или ячейку будет отключен.

      <DataGrid
        disableSelectionOnClick={true}
        rows={rows}
        columns={columns}
        pageSize={5}
        checkboxSelection
      />

песочница

Answer 2

но если я попытаюсь использовать проверенный идентификатор строки, это не сработает. Я хочу, чтобы при нажатии на строку открывалось всплывающее окно в этой строке, но также хочу, чтобы пользователь мог выбрать несколько строк (для загрузки). Я попробовал onSelectionModelChange, но я сделал журнал консоли }
; но это не сработало

      
const handleSelectionChange = (selection) => {
    console.log('selection changed');
    console.log(selection);
    // sendSelectedBookIds(selection);



        <DataGrid
        rows={manuscriptInfoList}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: 10 },
          },
        }}
        pageSizeOptions={[10, 25, 50, 100]}
        checkboxSelection
        disableRowSelectionOnClick
        onRowClick={(params, event) => handleRowClick(params, event)}
        slots={{
          toolbar: CustomToolbar,
          noRowsOverlay: CustomNoRowsOverlay,
        }}
        onSelectionModelChange={handleSelectionChange}


      /> ```