以反应最终形式

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

除此之外，我建议将值存储为状态中的数字而不是字符串。