Material UI 多 Select 不同的代码值和可见值 - 显示键而不是值

Question

我根据文档示例使用 Material UI 多个 Select。我需要保存所选选项的 ID 和显示名称，所以我渲染对象。当我使用带有占位符的文档中的示例时，我看到的是 id 而不是所选的名称。参见：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>

Answer 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(", ");
            }}

您可以让 Material-UI 找出正确的显示方式，方法是在您选择值时保留 renderValue 未定义：

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

也可以做一个更复杂的 renderValue，使用您的 names 数据结构将值转换为名称，但这只有在您想做一些不同于所选值的默认呈现（例如在 Chip 演示中）。

Material UI 多 Select 不同的代码值和可见值 - 显示键而不是值

Material UI Multi-Select different code value and visible value - show keys instead values

placeholder

multiple-select

reactjs

material-ui