Question

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

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

我的{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数组看起来像这样，我只使用name和id属性。

[
        {
            "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>
);

知道可能导致“选择”字段无法读取编辑和onChange上的值的原因吗？每个其他部分与示例几乎相同。已经被困了很长一段时间，所以任何形式的帮助都会很棒！

Populate Material UI v1.0.0-beta.27使用DevExtreme React Grid

0 个答案: