Реагировать на поле Formik дескриптор события onChange - PullRequest
Новая
       13

Реагировать на поле Formik дескриптор события onChange

0 голосов
/ 18 октября 2018

Я пытаюсь обработать onChange для компонента Field в React Formik, но он не работает.Я также попытался обработать его за пределами компонента Formik: 

handleChange(e) {
  console.log('changing');
}
<Field type="radio" name="players" value="1" onChange={e => this.handleChange(e)}/>

, но получаю предупреждение:

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

Пока мой код выглядит так: 

<Formik
  onChange={() => {
    console.log('changing');
  }}
  onSubmit={(values) => {
    console.log('submitted');
  }}
>
{({ isSubmitting, handleChange }) => (
  <Form>
    <InputWrapper>
       <span>1</span>
       <Field type="radio" name="players" value="1" onChange={handleChange}/>
       <span>2</span>
       <Field type="radio" name="players" value="2" onChange={handleChange}/>
    </InputWrapper>
    <button type="submit" disabled={isSubmitting}>
       {isSubmitting ? 'Loading..' : 'Start'}
    </button>
  </Form>
)}
</Formik>

Какие-нибудь советы / идеи?

1 Ответ

0 голосов
/ 25 февраля 2019

Вы должны использовать InputProps поля, как показано ниже ... 

import { TextField } from 'formik-material-ui';

<Field
  type="radio" 
  name="players" 
  value="2"
  component={TextField} 
  InputProps={{ onBlur:handleBlur }}/>

Чтобы использовать InputProps в поле, вам необходимо использовать компонент TextField из библиотеки formik-material-ui.

Другим способом является использование onKeyUp или onKeyDown, функции работают нормально с Field и функции похожи на onChange 

<Field 
  type="radio" 
  name="players" 
  value="2" 
  onKeyUp =this.handleChange/>
...