设置初始值为material ui select答案

【问题标题】：Set the initial value to material ui select设置初始值为material ui select
【发布时间】：2021-05-26 21:59:24
【问题描述】：

我在 Material UI 中有一个 TextField 用作 Select。 MenuItems 在表单中工作正常，但我无法根据先前填充的状态数据预先选择选项

我有这个，例如我想预先选择“Familia 3”，我应该设置什么？

<Textfield id="family" select value=0 defaultValue=3 >
   <MenuItem value="0">Seleccionar</MenuItem>
   <MenuItem value="1">Familia 1</MenuItem>
   <MenuItem value="2">Familia 2</MenuItem>
   <MenuItem value="3">Familia 3</MenuItem>
</TextField>

我尝试更改 Value, DefaultValue ，删除其中一个，但找不到解决方案 AI 投注非常简单，但我找不到任何解决方案来显示预选选项“Familia 3”

你能帮我解决这个问题吗？谢谢！

【问题讨论】：

我确实阅读了这个问题，它没有提到文档或你为什么尝试这些事情。

标签： reactjs material-ui

【解决方案1】：

默认值不适用于选择文本字段将您的初始值设置为 value 道具。您在 Textfield 开始标记中有拼写错误，它应该是 TextField 将非字符串值分配给属性时，请始终使用大括号，即：value={3}

<TextField id="family" select value={3}>
    <MenuItem value="0">Seleccionar</MenuItem>
    <MenuItem value="1">Familia 1</MenuItem>
    <MenuItem value="2">Familia 2</MenuItem>
    <MenuItem value="3">Familia 3</MenuItem>
</TextField>

【讨论】：

【解决方案2】：

您可以将 Familia 3 存储到状态中，然后将文本字段的值设置为状态

const [initial value, setinitialvalue ] = use state("Familia 
3")

<Textfield id="family" select value={initialValue} 
 onChange={(e) => setinitialvalue(e.target.value) } 
  defaultValue=3 >
    <MenuItem value="Seleccionar 
         ">Seleccionar</MenuItem>
   <MenuItem value="Familia 1">Familia 1</MenuItem>
    <MenuItem value="Familia 2 ">Familia 2</MenuItem>
   <MenuItem value="Familia 3">Familia 3</MenuItem>
</TextField>

【讨论】：