从下拉列表中选择选项时响应警告

Question

>我在 React 组件中有以下 Select 语句

<Select
id="type"
className={classes.formComponent}
onChange={ e => handleDropDownListEvent(e) }
required
defaultValue="DEFAULT"
>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
<option value="Opt3">
Opt3
</option>
<option defaultValue="DEFAULT" disabled>
Choose an event
</option>
</Select>

当我尝试从此下拉列表中在UI中选择一个选项时，我在chrome控制台中收到以下警告：

index.js:1375 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
in option (at HealthKitForm.tsx:134)
in ul (created by ForwardRef(List))
in ForwardRef(List) (created by WithStyles(ForwardRef(List)))
in WithStyles(ForwardRef(List)) (created by ForwardRef(MenuList))
in ForwardRef(MenuList) (created by ForwardRef(Menu))
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by Transition)
in Transition (created by ForwardRef(Grow))
in ForwardRef(Grow) (created by TrapFocus)
in TrapFocus (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Popover))
in ForwardRef(Popover) (created by WithStyles(ForwardRef(Popover)))
in WithStyles(ForwardRef(Popover)) (created by ForwardRef(Menu))
in ForwardRef(Menu) (created by WithStyles(ForwardRef(Menu)))
in WithStyles(ForwardRef(Menu)) (created by ForwardRef(SelectInput))
in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
in div (created by ForwardRef(InputBase))
in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
in WithStyles(ForwardRef(Input)) (created by ForwardRef(Select))
in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
in WithStyles(ForwardRef(Select)) (at HealthKitForm.tsx:128)
in form (at HealthKitForm.tsx:127)
in div (at HealthKitForm.tsx:125)
in HealthKitForm (at src/index.tsx:11)
in SmilerProvider (at src/index.tsx:10)

我做错了什么，如何解决此警告？另外，当我选择一个选项时会生成什么样的事件，因为我需要handleDropDownListEvent(事件：类型???(签名上的事件类型

Answer 1

我看到您的问题得到了回答，但是我可以建议您对到目前为止提供的代码进行改进吗？

通过使用材质 UI 库中的FormControl、InputLabel和MenuItem，管理选择和样式变得非常容易

const optionsArray = [Opt1, Opt2, Opt3, Opt4]
<FormControl> 
<InputLabel htmlFor="grouped-select" variant='outlined'> 
SELECT NAME 
</InputLabel>
<Select 
defaultValue="" 
className={classes.formComponent} 
onChange={e => handleDropDownListEvent(e)}>
{optionsArray.map((option, index) =>
<MenuItem key={index} value={option}>{option}</MenuItem>
)}                            
</Select>
</FormControl>

Answer 2

option中没有defaultValue的意思，应该改成value="DEFAULT"：

<Select defaultValue="DEFAULT">
...
// not defaultValue ="DEFAULT"
<option value="DEFAULT" disabled>
Choose an event
</option>
</Select>

通过检查您需要使用的文档进行更新MenuItem不是选项标签

<Select labelId="label" id="select" value="20">
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</Select>

Answer 3

由于错误已经指出

Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

这意味着您不能在选项标签上使用默认值，而只能在选择标签上使用。但这就是您可以使用selected属性在选项上设置默认值的方法

<select name = "dropdown">
<option value = "Java">Java</option>
<option value = "Discrete Mathematics" selected>Discrete Mathematics</option>
<option value = "Chemistry">Chemistry</option>
</select>