0

我正在尝试基于此示例实现我自己的 Grid 。但是当我编辑一行时，下拉菜单中的当前值消失了。当我单击下拉菜单以显示其他项目时，我可以看到它们，但是当我尝试选择一个项目时，我的应用程序崩溃并且控制台出现此消息 -Uncaught Error: Material-UI: the 'value' property is required when using the 'Select' component with 'native=false'.

所以我的理解是，Select 组件的值在编辑期间和 onChange 事件执行时都没有设置。

我的 {rows} 看起来像这样

[
    {
      "email": "test@domain.tld", 
      "id": "5a5c26f4c54d2d0366fa801b", 
      "name": "Test", 
      "token": "User-sdf84r89fwer", 
      "user_type": {
        "id": "5a5c25dbc54d2d0366fa801a", 
        "name": "Admin", 
        "permissions": {
          "lists": {
            "create": false, 
            "delete": false, 
            "read": false, 
            "update": false
          }, 
          "phases": {
            "create": false, 
            "delete": false, 
            "read": false, 
            "update": false
          }
        }, 
        "token": "UserType-k32k4kl9sdmfmk"
      }
    }
]

我的 {columns} 像这样

[
  { name: 'name', title: 'Name' },
  { name: 'email', title: 'Email ID' },
  {
    name: 'user_type',
    title: 'User Type',
    getCellValue: row => (row.user_type ? row.user_type.name : undefined)
  },
]

这些第一次正确渲染。user_type 列是我试图用下拉值填充的。user_types 数组看起来像这样，我只使用了nameandid属性。

[
        {
            "id": "5a5f6aadc54d2d269c0700ce",
            "name": "Admin",
            "permissions": {
                "lists": {
                    "create": true,
                    "delete": true,
                    "read": true,
                    "update": true
                },
                "phases": {
                    "create": true,
                    "delete": true,
                    "read": true,
                    "update": true
                }
            },
            "token": "UserType-k32k4kl9sdmfmk"
        },
        {
            "id": "5a5f6c44c54d2d269c0700cf",
            "name": "Moderator",
            "permissions": {
                "lists": {
                    "create": true,
                    "delete": true,
                    "read": true,
                    "update": true
                },
                "phases": {
                    "create": false,
                    "delete": false,
                    "read": false,
                    "update": false
                }
            },
            "token": "UserType-k32k4kl9sdmfmk"
        },
        {
            "id": "5a5f6cbbc54d2d269c0700d1",
            "name": "Guest",
            "permissions": {
                "lists": {
                    "create": false,
                    "delete": false,
                    "read": true,
                    "update": false
                },
                "phases": {
                    "create": false,
                    "delete": false,
                    "read": false,
                    "update": false
                }
            },
            "token": "UserType-k32k4kl9sdmfmk"
        }
]

最后基于示例，我将 user_types 作为道具传递给 LookUpEditCellBase 并像这样使用它，

const LookupEditCellBase = ({
  userTypes, value, onValueChange, classes,
}) => (
  <TableCell
    className={classes.lookupEditCell}
  >
    <Select
      value={value}
      onChange={event => onValueChange(event.target.value)}
      input={
        <Input
          classes={{ root: classes.inputRoot }}
        />
      }
    >
      {userTypes.map(item => (
        <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
      ))}
    </Select>
  </TableCell>
);

知道什么可能导致 Select 字段无法读取编辑和 onChange 上的值吗？其他所有部分都与示例几乎相同。现在被难倒了一段时间，所以任何形式的帮助都会很棒！

4

0 回答 0