Material UI Select如何实现下拉框下方展示已选中项

• 改造Select组件核心绑定逻辑：弃用组件原生的选中值渲染能力，将Select的value固定为空值，避免选中项显示在选择框内部。重写onChange事件，点击菜单项时做去重判断，将选中值追加到自定义的已选数组中，不要直接使用Formik默认的单值更新方法。
• 新增自定义已选渲染区：在Select组件下方直接遍历已选数组，按需求渲染已选项样式，可配套增加删除按钮支持移除已选值。
• 做好表单数据同步：每次更新已选数组时，同步将数组值写入Formik对应字段，不影响原有表单提交校验逻辑。

{/* 已选数组直接存在Formik的values中即可，这里对应字段为selectedCompanies */}
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
  <InputLabel id="company">Şirket</InputLabel>
  <Select
    labelId="company"
    name="company"
    id="company"
    label="Company"
    // 固定空值，屏蔽选择框内部的选中项展示
    value=""
    onChange={(e) => {
      const clickVal = e.target.value;
      if (!clickVal) return;
      const currentList = formik.values.selectedCompanies || [];
      // 重复值不重复添加
      if (currentList.includes(clickVal)) return;
      const newList = [...currentList, clickVal];
      formik.setFieldValue('selectedCompanies', newList);
    }}
    sx={{ width: 300 }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>

  {/* 下拉框下方自定义渲染已选项区域 */}
  <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
    {(formik.values.selectedCompanies || []).map((val) => {
      // 值和展示文本的映射表
      const textMap = { 10: 'Ten', 20: 'Twenty', 30: 'Thirty' };
      return (
        <Chip
          key={val}
          label={textMap[val]}
          onDelete={() => {
            // 点击删除按钮时从已选数组中移除对应项
            const filterList = formik.values.selectedCompanies.filter(item => item !== val);
            formik.setFieldValue('selectedCompanies', filterList);
          }}
        />
      )
    })}
  </div>
</FormControl>

代码中用MUI自带的Chip组件实现标签式已选项，如果你不需要依赖组件库样式，自己写普通DOM节点加自定义样式也可以，核心逻辑完全通用。

内容的提问来源于stack exchange，提问作者bartugenccan