我将以下Select语句放入React组件
<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(event:type ???)
签名上签名的事件类型答案 0 :(得分:4)
我看到您的问题已得到回答,但我可能建议您对到目前为止提供的代码进行改进...
通过使用Material UI库中的FormControl
,InputLabel
和MenuItem
,与styling一样,管理选择变得非常容易
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>
答案 1 :(得分:1)
defaultValue
中的option
没有意义,您应该将其更改为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>
答案 2 :(得分:0)
作为错误已经指出
Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>
这意味着您不能在选项标签上使用defaultValue,而只能在选择标签上使用。但这是您可以使用selected
属性在选项上设置默认值的方式
<select name = "dropdown">
<option value = "Java">Java</option>
<option value = "Discrete Mathematics" selected>Discrete Mathematics</option>
<option value = "Chemistry">Chemistry</option>
</select>