材质 UI 多选不同的代码值和可见值 - 显示键而不是值

Posted 2023-03-05

【中文标题】材质 UI 多选不同的代码值和可见值 - 显示键而不是值

【英文标题】：Material UI Multi-Select different code value and visible value - show keys instead values

【发布时间】：2019-09-15 04:08:01

【问题描述】：

我正在使用基于文档示例的 Material UI 多选。我需要保存所选选项的 id 和显示名称，所以我渲染对象。当我使用带有占位符的文档中的示例时，我看到的是 ids 而不是选定的名称。 见：https://codesandbox.io/s/kxz5yqmrzv?from-embed

const names = [
   id: "a", name: "Oliver Hansen" ,
   id: "b", name: "Van Henry" ,
   id: "c", name: "April Tucker" ,
   id: "d", name: "Ralph Hubbard" ,
   id: "e", name: "Omar Alexander" ,
   id: "f", name: "Carlos Abbott" ,
   id: "g", name: "Miriam Wagner" ,
   id: "h", name: "Bradley Wilkerson" ,
   id: "i", name: "Virginia Andrews" ,
   id: "j", name: "Kelly Snyder" 
];

          <Select
            multiple
            displayEmpty
            value=this.state.name
            onChange=this.handleChange
            input=<Input id="select-multiple-placeholder" />
            renderValue=selected => 
              if (selected.length === 0) 
                return <em>Placeholder</em>;
              

              return selected.join(", ");
            
            MenuProps=MenuProps
          >
            <MenuItem disabled value="">
              <em>Placeholder</em>
            </MenuItem>
            names.map(name => (
              <MenuItem
                key=name.id
                value=name.id
                // style=getStyles(name, this)
              >
                name.name
              </MenuItem>
            ))
          </Select>

【问题讨论】：

文档示例 - material-ui.com/demos/selects

【参考方案1】：

Select 只是按照您在 renderValue 函数中告诉它的操作：

            renderValue=selected => 
              if (selected.length === 0) 
                return <em>Placeholder</em>;
              
              // This will return a comma-separated list of the values.
              return selected.join(", ");
            

当您选择了值时，您可以通过将 renderValue 保留为 undefined 来让 Material-UI 找出正确的显示：

            renderValue=
              this.state.name.length > 0
                ? undefined
                : () => <em>Placeholder</em>
            

也可以做一个更复杂的renderValue 使用你的names 数据结构将值转换为名称，但这只有在你想要做一些不同于选定的默认呈现的事情时才需要值（例如在芯片演示中）。

【讨论】：

你能在多选芯片上给我同样的解决方案吗？在我的情况下还需要保存id显示名称（作为芯片设计）

@Lee 我建议您创建自己的问题，在那里您可以更全面地描述您的问题并包括您当前的代码等。从您的评论中我不清楚您要解决什么问题.

Here you go