Блог

У меня есть форма в formik, и поля обычно выглядят так:

 <Field
          component={TextField}
          name="phoneNumber"
          type="text"
          required
          label={t('containers:CommonFields.phoneNumber')}
          variant="outlined"
          margin="normal"
/>
  

Где поле импортируется из Formik, а текстовое поле просто оформлено в текстовом поле formik-material-ui:

 import { TextField } from 'formik-material-ui';
import breakpoints from 'styles/breakpoints';
import styled from 'styled-components/macro';

export default styled(TextField)`
  ${breakpoints.md`
    max-width: 320px;
  `};
  width: 100%;
`;
  

Что я хочу сделать, так это добавить маску ввода в это поле, используя react-input-mask. Это то, что у меня пока есть:

https://codesandbox.io/s/priceless-currying-hryv1

К сожалению, ввод не выполняется

Измените TextField импорт на

 import { TextField } from "@material-ui/core";
  

обновленный пример

или, если вы хотите сохранить текстовое поле formik, проверьте эту демонстрацию

Вам нужно изменить пару вещей внутри вашего компонента FormikTextField.

1. Вам не нужно локальное состояние, ваш ввод должен контролироваться Formik.
2. Вам нужно передать реквизиты, которые Formik Field отправляет своим дочерним элементам, в InputMask.
3. Вам нужно передать входные реквизиты дочерним элементам внутри InputMask.

В итоге рабочий компонент должен выглядеть примерно так

 const FormikTextField = (props) => {
  return (
    <InputMask
      {...props}
      {...props.field}
      mask="(0)999 999 99 99"
      disabled={false}
      maskChar=" "
    >
      {(inputProps) => <StyledTextField {...inputProps} />}
    </InputMask>
  );
};
  

Пожалуйста, взгляните на рабочую версию. Я думаю, нам нужно использовать useField хук, предоставляемый formik и использовать компонент непосредственно внутри formik формы, а не как компонент prop.