javascript - 带有自定义子项的 MUI Select 组件

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>
  );
}

标签： javascriptreactjsmaterial-ui

Answer 1

根据 Material-UI docs，这是您使用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. 将所有道具传递给您的自定义项目组件

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.将option值传递给valueprops

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

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

正确的方法是传递给value而不是type道具：

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

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

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

克隆 item 元素时，SelectInput 将props 设置为valueundefined 并使用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 道具来呈现选定的值，因此您需要确保将某些内容作为子项传递给显示：

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>

现场演示