输入失去焦点和每次击键 - TextField react-format-number

FBS*_*BSO 1 reactjs react-number-format

我已经InputComponent使用react-number-format. 此组件仅接受带一位小数的字符串数值。示例:"12.5"or"12"但不是"12.55"。这有效。

但是,当我使用InputComponent构建另一个组件 ( BiggerComponent) 时,输入会失去对每个击键的关注。

https://codesandbox.io/s/festive-ishizaka-bvktl

FBS*_*BSO 5

我只是通过移动NumberFormat在 Input 函数之外使用的函数来解决它。我认为,如果它在Input函数内部,则NumberFormat在每次击键时都会重新创建整个函数。这就是它失去焦点的原因。

工作实例:(与使用的NumberFormat函数的输入功能) https://codesandbox.io/s/festive-ishizaka-bvktl

工作示例:(使用在 Input 函数使用 NumberFormat的函数) https://codesandbox.io/s/great-snow-1h3ln