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

【问题标题】：Input loses focus and each key stroke - TextField react-format-number输入失去焦点并且每次击键 - TextField react-format-number
【发布时间】：2021-02-18 06:36:35
【问题描述】：

我使用 react-number-format 创建了一个输入组件 (InputComponent)。该组件仅接受带一位小数的字符串数值。示例："12.5" 或 "12" 但不是 "12.55"。这行得通。

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

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

【问题讨论】：

标签： reactjs react-number-format

【解决方案1】：

我刚刚通过将使用 NumberFormat 的函数移到 Input 函数之外解决了这个问题。我认为，如果它在 Input 函数内，则整个 NumberFormat 函数会在每次击键时重新创建。这就是它失去焦点的原因。

不工作示例：（使用 NumberFormat inside Input 函数的函数） https://codesandbox.io/s/festive-ishizaka-bvktl

工作示例：（在输入函数外部使用 NumberFormat 的函数） https://codesandbox.io/s/great-snow-1h3ln

【讨论】：