Когда я меняю выбор, я получаю: «Используйте реквизиты defaultValue или value на <select>вместо установки« selected »на <option>». - PullRequest
Новая
       3

Когда я меняю выбор, я получаю: «Используйте реквизиты defaultValue или value на <select>вместо установки« selected »на <option>».

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

У меня есть этот материал, выберите компонент: 

<FormControl fullWidth variant="outlined" className={classes.formControl}>
  <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
    Filial
  </InputLabel>
  <Select
    onChange={handleChange}
    onBlur={handleBlur}
    error={touched.filial && Boolean(errors.filial)}
    value={values.filial}
    defaultValue={'DEFAULT'}
    inputProps={{
      name: 'filial',
      id: 'outlined-filial-native-simple',
    }}
  >
    <option value="DEFAULT" disabled>Choose a salutation ...</option>
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </Select>
</FormControl>

Когда я изменяю выбранную опцию, я получаю:

index. js: 1 Предупреждение: используйте значение по умолчанию или значение подставляется вместо настройки, выбранной на

Я использую formik для обработки моей формы: 

const enhanceWithFormik = withFormik({
  mapPropsToValues: () => ({ email: '', password: '', filial: '' }),
  handleSubmit: values => {
    console.log(values)
  },
  isInitialValid: false,
  validateOnChange: true,
  validateOnBlur: true,
  displayName: 'MyForm',
  validationSchema: schema
})

Когда я заполняю поля своей формы и нажимаю кнопку отправки правильно печатает значение филиала, которое я выбрал в форме, но выдает эту ошибку в моей консоли.

Как я могу это исправить?

1 Ответ

0 голосов
/ 20 марта 2020

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

Во-первых, в вашем теге <Select> есть и value, и defaultValue. Но просто иметь один из них хорошо. (обратите внимание на предупреждение, которое вы получили: «Используйте реквизиты defaultValue или value»). В вашем случае, допустим, вы удалили defaultValue и оставили бы value.

Теперь убедитесь, что values.filial установлено как 'DEFAULT', поэтому value={values.filial} будет означать, что начальное значение равно 'DEFAULT', и в раскрывающемся списке первоначально отобразится Choose a salutation ...

Функция handleChange должна затем повторно выполнить рендеринг компонента при изменении раскрывающегося списка.

...