React-number-format: Doesn't work with redux field

[nourahassan]

I tried to wrap the NumberFormat in redux-form/field but it doesn't get the value initialized or set although the inner input contains the correct value.

Here's the code:

<Field name={this.props.fieldName} component={NumberFormat} customInput={TextField} hintText={this.props.title} thousandSeparator={true} prefix={'$'}/>

[Elliot128]

I think redux-form uses the onChange handler to modify form state. You will need to wrap the NumberFormat component to call props.onChange (passed from redux-form) whenNumberFormat.onValueChange occurs.

[BryceLarkin]

You pass the events object to onChange. Just in case anyone needed more clarification.

export default ({ inputRef, onChange, ...other }) => (
  <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
  />
);

[JChiquin]

You pass the events object to onChange. Just in case anyone needed more clarification.

export default ({ inputRef, onChange, ...other }) => (
  <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
  />
);

Hi man, I tried using this Field component:

function MyNumberFormat(props) {
  const { inputRef, onChange, ...other } = props;
  return (
    <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
    />
  );
}

...

<Field
   name="liquidation_fee"
   component={MyNumberFormat} 
   customInput={TextField}
   />

When I write in the input it returns the next error: Uncaught TypeError: onChange is not a function

PD: <Field/> is in a form decorated with redux-form
Sorry my english

[JChiquin]

You pass the events object to onChange. Just in case anyone needed more clarification.

export default ({ inputRef, onChange, ...other }) => (
  <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
  />
);

Hi man, I tried using this Field component:

function MyNumberFormat(props) {
  const { inputRef, onChange, ...other } = props;
  return (
    <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
    />
  );
}

...

<Field
   name="liquidation_fee"
   component={MyNumberFormat} 
   customInput={TextField}
   />

When I write in the input it returns the next error: Uncaught TypeError: onChange is not a function

PD: <Field/> is in a form decorated with redux-form
Sorry my english

I think I solved with this: const { inputRef, input: {onChange}, ...other } = props;

[davepacifico]

You pass the events object to onChange. Just in case anyone needed more clarification.

export default ({ inputRef, onChange, ...other }) => (
  <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
  />
);

Hi man, I tried using this Field component:

function MyNumberFormat(props) {
  const { inputRef, onChange, ...other } = props;
  return (
    <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
    />
  );
}

...

<Field
   name="liquidation_fee"
   component={MyNumberFormat} 
   customInput={TextField}
   />

When I write in the input it returns the next error: Uncaught TypeError: onChange is not a function
PD: <Field/> is in a form decorated with redux-form
Sorry my english

I think I solved with this: const { inputRef, input: {onChange}, ...other } = props;

You saved me a ton of time. Thanks!