选择未调用 renderValue 函数 [ReactJS/Material-UI]

Question

我在材料表（我安装的模块）中有一个选择功能。我还使用 Material-UI 中的 Chips 组件。但是，在这个函数中，我尝试对为什么当我选择某些内容时没有任何内容出现并且似乎我的 renderValue 函数没有被调用进行故障排除。

这是代码：

function handleChange(event) {
    console.log("!")
    setRoleIds(event.target.value);
  }

  const renderChip = (value) => {
    console.log("?!??!?");
    console.log(value);
    return <Chip label={value} className={classes.chip} />;
  };

  const [cassowaries, setCassowaries] = React.useState({
    columns: [
      { title: "Cassowary Name", field: "name" },
      {
        title: "Cassowary Roles",
        field: "roles",
        render: (rowData) => {
          return (
            <li>
              {rowData.roles.map((role) => (
                <Chip label={role} className={classes.chip} />
              ))}
            </li>
          );
        },
        editComponent: (props) => (
          <FormControl className={classes.formControl}>
            <InputLabel>Roles</InputLabel>
            <Select
              multiple
              value={roleIds}
              onChange={handleChange}
              input={<Input id="select-multiple-chip" />}
              renderValue={renderChip}
              // MenuProps={MenuProps}
            >
              {allRoleIds.map((id) => (
                <MenuItem key={id} value={id}>
                  {id}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        ),
      },
      { title: "Penguin", field: "penguin" },
    ],
    data: [{ name: "Mehmet", roles: roleIds, penguin: true }],
  });

有人可以帮助或指导我吗？

Answer 1

确保您设置了以下属性：

<Select
native={false}
displayEmpty={true}
...
</Select>

您必须设置displayEmpty={true}为使其在值为空时呈现，native={false}因为renderValue()根据文档仅适用于非本机选择。