在 mui 数据网格单元中使用 MUi 文本归档，当用户输入值消失时，它不起作用

Question

以下链接有一个实例

链接到实例： https://stackblitz.com/edit/ashok-reddy?file=muidatagrid.tsx,index.html,index.tsx。 当用户在 mui 数据网格单元中输入 Mui 文本字段的值时，光标从字段移出后输入值消失 以下屏幕截图显示用户输入值 在此输入图片描述 以下屏幕截图显示了从字段中移动后值消失的位置 在此输入图片描述 当用户输入值消失时，MUi 文本文件在 mui 数据网格单元中不起作用，并且当用户输入值时渲染函数不会渲染 React hook 表单字段。因此，用户输入的值在从使用 mui 数据网格单元归档的 mui 文本中移出后会消失

Answer 1

=> 主要问题在于

CountButton

函数。

TextField

内的

CountButton

由表单的

Controller

控制，但其值未与DataGrid行状态正确同步。

将 CountButton 修改为：

  const CountButton = (params: GridRenderCellParams<any, string>) => {
    const { id, value } = params.row;

    return (
      <FormControl sx={{ marginTop: 2, width: '100%' }}>
        <Controller
          control={control}
          name="value"
          render={({ field: { onChange, onBlur, value: fieldValue, ref } }) => (
            <TextField
              id={`value${id}`}
              inputRef={ref}
              onBlur={onBlur}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                setValue(`value`, e.target.value);
                onChange(e.target.value);
              }}
              value={fieldValue || value} // Display the field value if present, else display the row value
            />
          )}
        />
      </FormControl>
    );
  };

现在，我们使用 params.row 对象中的 id 和值来访问行的 ID 和值。

然后使用从 useForm 获取的 fieldValue（如果存在）渲染 TextField。如果 fieldValue 为空，我们将显示该行的原始值。

出于演示目的，我已从

CountButton

函数中删除了 sx 属性，但您可以稍后添加它以用于样式目的。

如果您还有任何其他问题，请告诉我:(