在 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存儲的值將保持為零。

這是我的代碼框。

Answer 1

格式化字符串后， react-number-format不會調用 onChange。

但是react-number-format有一個名為onValueChange的道具，它在格式化字符串后被觸發：

示例： https://codesandbox.io/s/react-final-form-wreact-number-format-bmeg9

除此之外，我建議將值存儲為 state 中的數字而不是字符串。