Unformatted value (or floatValue) within onChange

Is there a way to get the whole ChangeEvent with the unformatted value (or float value)?

I’m using formik and therefore need to use onChange, because it needs the ChangeEvent data to determine which field has changed.

The problem is, that onChange’s event.target.value contains the formatted value. But I need the unformatted value (or float value).

<NumberFormat
  onChange={(event) => {
    console.log(event); // I need this event
    console.log(event.target.value); // This is the formatted value, I don't want
  }}
  onValueChange={(values) => {
    console.log(values.value); // Here's the unformatted value, I want
    console.log(values.floatValue); // Here's the float value, which is okay, too
  }}
  prefix="$"
/>

In other words: I need onChange with the value provided by onValueChange.

Is there any way to get this working?

[eMarek]

I think that majority of us have problems when upgrading to v4 when this was changed:

Trigger onValueChange if the value is formatted due to prop change.

While onChange is triggered only at typing, onValueChange is triggered at typing and at prop change event. This is crucial! What most of us need is pure value at onChange listener and this is not possible anymore out of the box. I’ve tested it @rsilvamanayalle solution and it does work, but we are relying on that onChangeValue is called before onChange which is bad.

[rsilvamanayalle]

Is there a way to get the whole ChangeEvent with the unformatted value (or float value)?

I’m using formik and therefore need to use onChange, because it needs the ChangeEvent data to determine which field has changed.

The problem is, that onChange’s event.target.value contains the formatted value. But I need the unformatted value (or float value).

<NumberFormat
  onChange={(event) => {
    console.log(event); // I need this event
    console.log(event.target.value); // This is the formatted value, I don't want
  }}
  onValueChange={(values) => {
    console.log(values.value); // Here's the unformatted value, I want
    console.log(values.floatValue); // Here's the float value, which is okay, too
  }}
  prefix="$"
/>

In other words: I need onChange with the value provided by onValueChange.

Is there any way to get this working?

I don’t know if this a pretty solution, but it work well for me…

const PrettyInput = ({ onChange, ...rest }) => {
  let floatValue = 0;
  return (
    <NumberFormat
      onValueChange={values => (floatValue = values.floatValue)}
      onChange={() => onChange(floatValue || '')}
      {...rest}
    />
  );
};