Обновите значение на входной размытости в реакции-окончательной форме

Question

Я использую react-number-format с react-final-form. Мой компонент выглядит следующим образом:

const CurrencyInput = props => {
  return (
    <NumberFormat
      thousandSeparator=" "
      decimalScale="2"
      isNumericString={true}
      fixedDecimalScale={true}
      allowNegative={false}
      autoComplete="off"
      onBlur={props.input.onBlur}
      onFocus={props.input.onFocus}
      onChange={value => props.input.onChange(value)}
    />
  );
};

react-number-format имеет allowLeadingZeros опору, которая удаляет ведущие нули при входном размытии. Как я могу обновить значение в react-final-form соответственно? Если я наберу нули перед числом, значение в самом входе будет исправлено при размытии, но значение, сохраненное react-final-form, останется с нулями.

Вот мои codesandbox .

Answer 1

react-number-format не вызывает onChange после форматирования строки.

Но react-number-format имеет реквизит с именем onValueChange, который запускается после форматирования строки:

Пример: https://codesandbox.io/s/react-final-form-wreact-number-format-bmeg9

Кроме того, я предлагаю хранить значение в виде числа в состоянии, а не в виде строки.