Как зафиксировать изменения флажка внутри Datagrid (а не выбора строки) при щелчке?

Question

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

Как мне это преодолеть? Мне не нужно редактировать строки или ячейки, но у меня есть эти раскрывающиеся меню и этот флажок.

(PS В этом коде есть некоторые ошибки, но он близок к моему производственному коду. Я пытался создать CodeSandbox, но он выдавал кучу ошибок при импорте Datagrid.)

      const rows = [
    {
      id: 1,
      fieldName: "ID"
    },
    {
      id: 2,
      fieldName: "VisitId"
    },
    {
      id: 3,
      fieldName: "First Name"
    }
  ];

  const columns = [
    {
      field: "fieldName",
      headerName: "fieldName",
      flex: 1,
      renderCell: (param: GridCellParams) => {
        const handleChange = (e: any): void => {
          myModel.checked= !myModel.checked
        };

        return (
          <Checkbox
            onClick={(e) => handleChange(e)}
            checked={myModel.checked}
          />
        );
      },
    }
  ];

<DataGrid
  rows={rows}
  columns={columns}
/>

Answer 1

Похоже, я решил свой собственный вопрос, но я не совсем уверен, как он работает, поэтому мне бы хотелось, чтобы кто-то еще мог объяснить или предоставить другое решение.

Я добавил звонок в setCellFocus от GridApiинтерфейс . Похоже, изменение фокуса ячейки сообщает таблице о необходимости зафиксировать любые изменения, я предполагаю, как это работает.

      {
      field: 'fieldName',
      headerName: 'fieldName',
      flex: 1,
      renderCell: (param: GridCellParams) => {
        const { id, value, api, field } = param;

        const handleChange = (e: any): void => {
          myModel.checked =
            !myModel.checked;

          api.setCellFocus(id, field);  // <---- I added this
        };

        return (
          <Checkbox
            onClick={(e) => handleChange(e)}
            checked={amyModel.checked}
          />
        );
      },
    },