javascript - MUI 选择 | 更改所选值在输入中的显示方式
问题描述
我有一个对象数组,我想绑定对象的多个属性,MenuItem
但我只想显示一个要显示的属性Select
在上图中,它在选择显示中显示 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>
);
}
解决方案
推荐阅读
- php - 作曲家安装,分段错误
- python - 使用 python boto3 库或任何其他方式获取 ebs 卷、cpu、内存的 aws ec2 实例使用情况
- go - 用 go-mocket 模拟 GORM 数据库不起作用
- python - 格式化 numpy savetext 值
- java - SQL 异常:ResultSet 关闭后不允许操作。这是为什么?
- python - 实现 LHS 不是二进制的含义?
- python - 安装独立 Python Git 子模块的最佳实践
- java - 在 android studio 中连接到 xamm 服务器失败
- excel-formula - 根据另一个单元格的值插入一个单元格值
- python - 如何解决“函数使用无效(
)"