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

Question

我在 Material 表 ( a module which I installed ) 中有一个选择功能。我也在使用 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() 根据 docs 仅适用于非 native 选择.