Компонент поля Redux-формы не запускает функцию нормализации, если тип поля - число - PullRequest
Новая
       32

Компонент поля Redux-формы не запускает функцию нормализации, если тип поля - число

1 голос
/ 11 июня 2019

Я передаю компонент antd (FormFieldInput) компоненту Field формы redux-form.Все хорошо работает с типами ввода «текст» и «телефон».Функция нормализации чисел перестает работать, как только я изменяю тип поля на «число».

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

Нормализатор: 

const normalizeNumber = (value /* , previousValue */) => {
  console.log('---input', value);
  if (!value) {
    return value;
  }
  const onlyNums = value.replace(/[^\d]/g, '');
  console.log('---output', onlyNums);
  return onlyNums;
};

Использование: 

<Field
  name="size"
  type="number"
  component={FormFieldInput}
  label="Size"
  placeholder="Size"
  required
  validate={[required, maxLength255]}
  normalize={normalizeNumber}
/>

FormFieldInput: 

const FormFieldInput = ({
  input,
  label,
  type,
  placeholder,
  required,
  meta: { touched, error, warning }
}) => {
  const [hasError, setHasError] = useState(false);
  const [hasWarning, setHasWarning] = useState(false);

  console.log('---input', input);

  useEffect(() => {
    setHasError(!!error);
  }, [error]);

  useEffect(() => {
    setHasWarning(!!warning);
  }, [warning]);

  const ref = createRef();

  return (
    <div className="form-item">
      <div className="form-item__label">
        {`${label}:`}
        {required && <span style={{ color: 'red' }}> *</span>}
      </div>
      <div className={`form-item__input`}>
        <AntInput
          {...input}
          ref={ref}
          placeholder={placeholder}
          type={type}
        />
      </div>
    </div>
  );
};

export const AntInput = React.forwardRef((props, ref) => {
  const { placeholder, type, suffix } = props;
  console.log('---type', type);

  return <Input {...props} ref={ref} placeholder={placeholder} type={type} suffix={suffix} />;
});

Я ожидаю, что все входные данные пройдут через функцию нормализации, но каким-то образом алфавитные символы проходят через нее.

...