Реагировать на предупреждение при выборе опции из выпадающего списка - PullRequest
Новая
       3

Реагировать на предупреждение при выборе опции из выпадающего списка

0 голосов
/ 06 февраля 2020

У меня есть следующий оператор 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>

И когда я пытаюсь выбрать опцию в пользовательском интерфейсе из этого выпадающего списка, я получаю следующее предупреждение в chrome console: 

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 ???)

Ответы [ 3 ]

4 голосов
/ 06 февраля 2020

Я вижу, что на ваш вопрос дан ответ, но могу ли я порекомендовать улучшить код, который вы предоставили до сих пор ...

С использованием 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>
1 голос
/ 06 февраля 2020

Нет смысла для 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>
0 голосов
/ 06 февраля 2020

В качестве ошибки уже указывалось, что 

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

Это означает, что вы не можете использовать defaultValue для тега option, который вы можете использовать только для тега select. Но так вы можете установить значение по умолчанию для опции, используя атрибут selected 

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