材质UI多选不同的代码值和可见值-显示键代替值 [英] Material UI Multi-Select different code value and visible value - show keys instead values

问题描述

我正在根据文档示例使用Material UI Multiple Select.我需要保存所选选项的ID并显示名称，因此我渲染对象.当我使用带占位符的文档中的示例时，我看到的是id而不是selected的名称. 请参阅: https://codesandbox.io/s/kxz5yqmrzv?from-embed

I am using Material UI Multiple Select based on documentation example. I need to save id of the selected option and show name, so I render object. When I used example from documentation with placeholder, i see ids instead names of selected. See: 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>

推荐答案

Select只是按照您在renderValue函数中告诉它要执行的操作:

The Select is just doing what you have told it to do in your renderValue function:

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

您可以通过在选择值后保留renderValue的不确定性来让Material-UI找出正确的显示:

You can let Material-UI figure out the correct display by leaving renderValue undefined when you have selected values:

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

还可以执行更复杂的renderValue，该renderValue使用您的names数据结构将值转换为名称，但这仅在您要执行与所选内容的默认呈现不同的操作时才需要值(例如在Chip演示中).

It would also be possible to do a more complicated renderValue that uses your names data structure to convert the values to names, but this is only necessary if you want to do something different than the default rendering of the selected values (such as in the Chip demonstration).

这篇关于材质UI多选不同的代码值和可见值-显示键代替值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！