具有自定义子项的 MUI 选择组件

Question

我正在尝试创建一个Select包含一系列通过列表映射的自定义项的组件。每个项目都有一个特定的类型，并且根据该类型，菜单项将具有特定的 MUI 图标。我创建了一个用于管理整个Select组件的特定组件和另一个用于显示每个项目、其值及其图标的特定组件。问题是，onChange每当我单击其中一项时，该功能都不会触发。问题可能是什么？

我附上我正在做的事情的代码。

const myTypes = {
  TYPE_1: "Type 1",
  TYPE_2: "Type 2",
  TYPE_3: "Type 3",
};

function TypeSelect(props) {
  const classes = useStyles();
  const [state, setState] = useState(myTypes.TYPE_1);

  const onChangeType = (e) => {
    setState(e.target.value);
  };

  return (
    <Select
      id="select-type"
      value={state}
      onChange={onChangeType}
    >
      {Object.keys(myTypes).map((type) => (
        <TypeSelectMenuItem
          type={myTypes[type]}
          key={type}
        />
      ))}
    </Select>
  );
}

function TypeSelectMenuItem({ type }) {
  const renderIcon = () => {
    switch (type) {
      case myTypes.TYPE_1:
        return <ShortTextIcon />; // Material-UI icon
      case myTypes.TYPE_2:
        return <SubjectIcon />; // Material-UI icon
      case myTypes.TYPE_3:
        return <RadioButtonCheckedIcon />; // Material-UI icon
      default:
        return <Fragment />;
    }
  };

  return (
    <MenuItem value={type} >
      <ListItemIcon>{renderIcon()}</ListItemIcon>
      <ListItemText primary={type} />
    </MenuItem>
  );
}

Answer 1

根据 Material-UI文档，这是使用MenuItem组件来渲染Select选项的方式：

<Select value={age} onChange={handleChange}>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

当您想要传递自定义组件而不是MenuItem作为Select子项时。例如TypeSelectMenuItem，您需要执行以下操作：

1. 将所有 props 传递给您的自定义项目组件

SelectInput将克隆每个子级并在场景后面附加额外的事件处理程序作为额外的道具，因此请确保使用扩展运算符将所有它们传递下来：

const TypeSelectMenuItem = (props) => {
  return (
    <MenuItem {...props}>
      {...}
    </MenuItem>
  );
};

<Select value={state} onChange={onChangeType}>
  {Object.keys(myTypes).map((type) => (
    <TypeSelectMenuItem value={myTypes[type]} key={type}>
      {myTypes[type]}
    </TypeSelectMenuItem>
  ))}
</Select>

2. 将选项值传递给valueprops

不要像在这里所做的那样发明一个新的道具名称：

<TypeSelectMenuItem type={myTypes[type]} key={type} />

正确的方法是传递 tovalue而不是typeprops：

<TypeSelectMenuItem value={myTypes[type]} key={type} />

原因是因为在内部，SelectInput引用props.value而不是您的props.type. 看看这个和这个。使用除此之外的任何东西props.value都会导致意外的行为。

3.引用data-value而不是value在您的自定义组件中

克隆 item 元素时，将propsSelectInput 设置value为 undefined 并使用data-valueprops 代替，因此您需要data-value在内部使用 props：

const TypeSelectMenuItem = (props) => {
  // when passing as children item of Select. props.value is set to undefined.
  // Use props['data-value'] instead.
  return (
    <MenuItem {...props}>
      {...}
      <ListItemText primary={props["data-value"]} />
    </MenuItem>
  );
};

4. 将子项传递给自定义项组件以呈现所选值

SelectInput使用children props来渲染选定的值，因此您需要确保将某些内容作为子级传递以进行显示：

const TypeSelectMenuItem = (props) => {
  return (
    <MenuItem {...props}>
      // this is children of MenuItem, so it is not displayed as selected value
      <ListItemIcon>{renderIcon()}</ListItemIcon>
      <ListItemText primary={props["data-value"]} />
    </MenuItem>
  );
};

<Select value={state} onChange={onChangeType}>
  {Object.keys(myTypes).map((type) => (
    <TypeSelectMenuItem value={myTypes[type]} key={type}>
      // this is children of TypeSelectMenuItem, so it is displayed as selected value
      {myTypes[type]}
    </TypeSelectMenuItem>
  ))}
</Select>

现场演示