我有一个对象数组,我想在 MenuItem
中绑定(bind)对象的多个属性,但我只想显示要在 Select
中显示的单个属性。 p>
在上图中,它在选择显示中显示 10-xyz,它应该只显示 10。
const [age, setAge] = React.useState("");
const [options, setOptions] = React.useState([
{
name: "xyz",
age: "10"
},
{ name: "xyz", age: "20" }
]);
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{options.map((ele) => {
return(<MenuItem value={ele.age}>
{`${ele.age}-${ele.name}`}
</MenuItem>)
})}
</Select>
);
}
最佳答案
使用 renderValue
属性来改变 Select
在 Input
组件中显示值的方式:
<Select renderValue={(p) => p}
您的代码中还有 2 个问题:
您应该在
MenuItem
中传递一个key
以区分列表中的每个项。参见 this以获得更多解释。如果您想为您的
选择
显示标签
,您应该使用TextField
而不是Select
> 如我的其他文章所述answer .
我已经在下面的演示中解决了这两个问题。
有关引用,请参阅选择
API here .
关于javascript - MUI 选择 |更改所选值在输入中的显示方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69648684/