I have created an input component ( InputComponent
) using react-number-format
. This component accepts only a string numerical value with one decimal. Example: "12.5"
or "12"
but not "12.55"
. This works.
However when I use InputComponent
to build another component ( BiggerComponent
), the input loses its focus on each key stroke.
I just solved it by moving the function that uses NumberFormat
outside the Input function. I think that if it is inside the Input
function, the whole NumberFormat
functions gets re-created at each key stroke. That's why it looses focus.
Not working example: (with the function that uses NumberFormat inside the Input function) https://codesandbox.io/s/festive-ishizaka-bvktl
Working example: (with the function that uses NumberFormat outside the Input function) https://codesandbox.io/s/great-snow-1h3ln
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.