以 react-final-form 更新输入模糊的值

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

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

以 react-final-form 更新输入模糊的值

Update the value on input blur in react-final-form

reactjs

react-final-form