Отсутствует заполненное состояние для поля «Выбрать» в компоненте FormControl Material-UI при использовании Formik - PullRequest
Новая
       9

Отсутствует заполненное состояние для поля «Выбрать» в компоненте FormControl Material-UI при использовании Formik

0 голосов
/ 16 января 2019

Я создаю форму в Reactjs, используя Formik и Material-UI. У меня возникли проблемы с поведением поля Select с интерфейсом Material-ui.

Проблема заключается в том, что после выбора параметра в поле и после удаления с него метка поля не остается в верхней части, как должно быть, а возвращается в исходное положение, как поле wasn ' т заполнены. Вы можете проверить поведение и код в песочнице .

Я использую компонент Material-UI TextField, который использует подкомпонент FormControl для сохранения состояния группы полей. В состоянии компонента FormControl есть логическое значение filled ( см. Источник здесь ), для отслеживания, заполнен ли input. Я думаю, корень проблемы в том, что это свойство государства всегда остается ложным. Однако при фокусировке на поле другое свойство, сосредоточенное, изменяется.

Я предполагаю, что что-то происходит с функцией onChange, примененной к полю. Мне нужен onChange, поступающий от Formik для обработки состояния формы, и это может быть против другого состояния.

Я пытался найти способ обработать FormControl заполненное свойство, но безуспешно.

Вот основной код. Однако, очень ясно проверить код в песочнице . 

class SelectField extends Component {
  render() {
    const { field, form, disabled = false, children, ...props } = this.props;
    const { name, onChange, onBlur, value } = field;
    const { touched, errors, isSubmitting } = form;
    const fieldError = getIn(errors, name);
    const showError =
      (getIn(touched, name) && !!fieldError) ||
      (form.submitCount > 0 && !!fieldError);

    return (
      <MuiTextField
        fullWidth
        error={showError}
        id="filteringField"
        label="Tipo de territorio"
        helperText={showError ? fieldError : props.helperText}
        select={true}
        SelectProps={{
          disabled: isSubmitting || disabled,
          ...props,
          ...field
        }}
        children={children}
      />
    );
  }
}

Как уже было сказано, компонент обернут Field компонентом Formik: 

<Field id="filteringField" name="filteringField" component={SelectField}>
  <MenuItem value="region">Región</MenuItem>
  <MenuItem value="provincia">Provincia</MenuItem>
  <MenuItem value="comuna">Comuna</MenuItem>
</Field>

Итак, мне интересно, есть ли какой-нибудь способ доступа к состоянию FormControl из родительского компонента или какое-либо другое решение для его работы. Спасибо за любую помощь!

...