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

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 ，管理选择和样式变得非常容易

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>

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

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