Usage with redux-forms

[sidmitra]

I'm trying to use this component with redux-forms. I've gotten the following snippet below.

<Field name="rate" type="text" id="Rate"
           component={props => (
                <CurrencyInput  
                    prefix="$" 
                    precision="0" 
                    thousandSeparator="," 
                     value={ props.input.value } 
                     onChange={ props.input.onChange } />)} />

This does seem to render the input text correctly and even renders the initial values passed to it correctly. But on saving the form the value sent to the backend includes all the formatting(i.e. the masked value). What is the preferred way to use this with redux-forms. Perhaps an example of the same would be helpful.

Do i need to update the form onSubmit to use the actual value and not the masked value?

See Redux Form - Custom Component

[lothisoft]

@sidmitra
In the redux-form onSubmit() handler, you can turn the currency formatted string into a number by removing all undesirable characters:
e.g.

const unformattedAmount = formattedAmount.replace(/[^0-9|.|-]+/g,""); // removes everything besides a digit, a period or a minus
const amountAsNumber = Number(unformattedAmount); // the unformatted string is turned into a number

[jsillitoe]

@sidmitra New with version 1.3.0, instead of using the onChange callback, use onChangeEvent. The signature for the new function looks like onChangeEvent(event, maskedvalue, floatvalue). Hopefully this works for your use case.