I have an "uncontrolled" React component with an input field like so:
render: function(){
return (
<input
id="pickupField"
tabIndex="1"
placeholder=""
className="order-form-input"
onFocus={this.disableAddresses}
onBlur={() => {
this.enableAddresses();
this.fieldChange('address');
}}
defaultValue={(order.pickup || {}).address || ''}
ref="pickupAddress"
hintText={(this.state.hideHintText) ? "" : "Enter the pickup address"}
floatingLabelFixed={true}
floatingLabelText="Pickup Address"
/>
)
}
the problem I am having is that I want to update this component with new data after it's rendered the first time, and using defaultValue instead of value means that the input field text won't update after the first render. E.g., the only way to update the text in the input field is for the user to type into it, I cannot seem to change it programmatically.
I can solve this problem by using value instead of defaultValue. However, the reason I do not want to use use value instead of defaultValue, is because then I have to use an onChange listener which is way overkill for my use case here.
The reason using an onChange listener is overkill is because I sync with the database everytime the component state changes. I would rather sync on onblur instead of syncing on onchange.
I see some solutions to this problem out there, using React fields such as "key", but TMK this solution will force the component to re-mount which sounds bad for performance and keeping the logic simple.
Anyone know how to solve this problem? How to update a React component's input fields programmatically, but avoiding an onchange listener?
