Replace string ref usage with callback refs #170
Conversation
| // If formatted number has changed, call on change | ||
| if (this.state.formattedNumber !== prevFormattedNumber) { | ||
| this.props.onChange(this.state.formattedNumber, this.state.selectedCountry); | ||
| } |
There was a problem hiding this comment.
As this component maintains its own state, if there are changes to the value of the telephone field that were caused by the incoming props these changes will be applied in _mapPropsToState. Prior to this fix, such a change in the state will not call onChange. This fixes it.
There was a problem hiding this comment.
@mukeshsoni any objections to this change? Perhaps this was suggested in the past?
There was a problem hiding this comment.
componentWillReceiveProps is doing a lot in this component. I shouldn't have done this in the first place. This piece of code has been the source of a lot of bugs in this component. I am thinking about completely removing componentWillReceiveProps and give an alternate solution making it a controlled/uncontrolled/(controlled + uncontrolled) component
|
@ablamunits I have completely removed the dependency on |
Hi,
Setting element
refs using "String Refs" is considered legacy API by React and is generally discouraged due to certain issues.We personally ran into issues in our own setup, where the usage of string refs caused the following error to appear when
ReactTelephoneInputwas mounted in a our larger application, bundled with browserfiy:I did not dig any deeper into the exact root cause of this, and perhaps this has something to do with the structure of our project. However, using callback refs in telephone input has solved the issue for us and it seems to be a reasonable solution, considering the currently used API will be deprecated at some point.
Thanks