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

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(event: type???)

签名上的事件类型

Answer 1

我看到您的问题已得到解答，但我可以建议对您目前提供的代码进行改进吗...

通过使用 Material UI 库中的 FormControl、InputLabel 和 MenuItem，管理 Selects 变得非常容易，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>