我正在使用基于文档示例的Material UI Multiple 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>
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
转换为名称,但这只有在你想要做的事情不同于所选值的默认渲染时(例如在芯片中)示范)。