MUI Select组件自定义选中值显示方式：仅展示对象单个属性

你可以通过 Material-UI Select 组件提供的 renderValue 属性自定义选中项在输入框中的展示内容，无需修改原有下拉选项的展示逻辑，修改后的代码如下：

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}
    // 新增renderValue自定义选中态展示内容
    renderValue={(value) => value}
  >
    {options.map((ele) => {
      return(<MenuItem value={ele.age}>
        {`${ele.age}-${ele.name}`} 
      </MenuItem>)
    })}
  </Select>
);
}

renderValue 函数的入参为当前选中的 value 值，返回值就是输入框中最终渲染的内容，这样既保留了下拉列表中同时展示年龄和名称的效果，又实现了选中后仅展示年龄的需求。

内容的提问来源于stack exchange，提问作者Priyanka Panjabi