我正在使用基于文档示例的 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>
最佳答案
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
让 Material-UI 找出正确的显示。当您选择了值时未定义: renderValue={
this.state.name.length > 0
? undefined
: () => <em>Placeholder</em>
}
也可以做一个更复杂的
renderValue
使用您的 names
数据结构将值转换为名称,但这仅在您想要执行与所选值的默认呈现不同的操作时才需要(例如在芯片演示中)。
关于reactjs - Material UI 多选不同的代码值和可见值 - 显示键而不是值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55854132/