当值与 MenuItem 文本不同时，React Material UI 选择显示值不会改变答案

【问题标题】：React Material UI select display value doesn't change when value is different from MenuItem text当值与 MenuItem 文本不同时，React Material UI 选择显示值不会改变
【发布时间】：2022-01-12 11:10:05
【问题描述】：

我有一个看起来像这样的 Select

<TextField
  id="year-select"
  select
  value={year ? year : "Select year"}
  onChange={(e) => setYear(e.target.value)}
>
<MenuItem value={moment().add(1, 'y')}>{moment().add(1, 'y').format('YYYY')}</MenuItem>
....
<MenuItem value={moment().add(10, 'y').format('YYYY')}>
{moment().add(10,'y').format('YYYY')}
</MenuItem>
</Textfield>

当该值等于 menuitem 的子值（例如示例中的第二个 menuitem）时，显示值会改变得很好，而如果不同，它将是空白的。我认为这来自选择文本字段中的 value 道具，但将其更改为像第一个菜单项一样，然后格式化道具中的值也不起作用。

除了创建一个处理两个不同变量以供显示和使用的handleChange 之外，有没有人知道我可以使用的解决方案？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您需要填写选择年份的选项。所以要么输入一个占位符（取决于你的文本字段组件），要么像这样添加一个菜单项： <MenuItem value={"Select year"}>{"Select year"}</MenuItem> 呈现“选择年份”的值。

【讨论】：