Get raw value of input

[prawana-perera]

HI,

I am able to get the value of the input using the onChange function and via even.target.value (as per documentation). However the value contains the mask characters as well. Is there any way to get the raw value?

[timhwang21]

Hi @prawana-perera,

I had the same issue as you. My quick hack was to add a function _getRawValue():

// react-maskedinput/src/index.js
_getRawValue() {
  var regex = new RegExp(this.props.placeholderchar || '_', 'g')
  var value = this.mask.getRawValue().replace(regex, '')
  return value === this.mask.emptyValue ? '' : value
},

I then made this accessible on the HTML element:

// react-maskedinput/src/index.js
return <input {...props}
  // more props
  data-raw={this._getRawValue()}
/>

Then, when submitting the form, you can either directly access the DOM with the data-raw tag, or maintain a separate state variable in the parent component of the component:

// YourComponent.jsx
_onChange(e) {
  const raw = `${e.target.name}Raw`
      , stateChange = {
    [e.target.name]: e.target.value,
    [raw]: e.target.getAttribute('data-raw')
  }
  this.setState(stateChange)
},

Not very elegant, but it works! I'm echoing your sentiment in that native support for this would be very appreciated. For example, I want some number inputs to be masked in my app, but I want to store them in the database as integers instead of strings.

[prawana-perera]

Thanks for the response. I see what you have done. I wonder if we can decorate the e.target with the raw value as well? i.e.. e.target.rawValue

in the source index.js file, _onChange function line 92, the e.target.value is set. Can we also set the raw value as well...so that on the parent component's (i.e. Your component) onChange, we can get both the e.target.value and e.target.rawValue. It is pretty much what you have done instead of using the data-raw attribute.

Maybe can submit this as a PR?

[timhwang21]

I didn't try that but I'm not sure how that would work with reacts
synthetic events... Worth a shot!

Not sure this would make for a good pr because in all honesty my solution
is more of a hack than anything, like I said earlier I'd prefer a more
inbuilt and elegant solution. Unfortunately I don't really have the time to
dive deeper into this!

[aesopwolf]

@prawana-perera this PR seems to do exactly what you (and I) need #72