reactjs - 在 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有allowLeadingZerosprop，它在输入模糊时去除前导零。如何react-final-form相应地更新值？如果我在数字前输入零，则输入本身的值会在模糊时得到纠正，但存储的值react-final-form保持为零。

这是我的代码框。

标签： reactjsreact-final-form

Answer 1

react-number-format格式化字符串后不调用 onChange。

但是react-number-format有一个 proponValueChange在格式化字符串后被触发：

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

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