React onChange doesn't fire on text input when formatter.js is used

Question

I'm using a formatter.js to format some input box. I want to connect this formatter to my react app so I've write a simple module but onChange function doesn't fire. When I remove the formatter library the input box works as planned. But I want to format the inputs and also use the values inside my React application.

After a brief search over the internet I've came across with this question;React: trigger onChange if input value is changing by state? but I'm not sure how can I apply that solution to my application.

ReactMaskedInput.js

import React, { Component } from 'react'

class ReactMaskedInput extends Component {
    constructor(props) {
        super(props)
        this.onChangeHandler = this.onChangeHandler.bind(this)
        this.state = {
            value: ""
        }
    }

    onChangeHandler(event) {
        this.setState({
            value: event.target.value
        })
        alert(this.state.value)
    }

    componentDidMount() {
        let dataMask = this.props.dataMask
        window.$(`#${this.props.id}`).formatter({
            pattern: dataMask
        });
    }

    render() {
        return (
            <div >
                <h3>
                    <b>{this.props.header}</b>
                </h3>
                <input
                    id={this.props.id}
                    type="text"
                    placeholder={this.props.placeHolder}
                    className="form-control"
                    onChange={event => this.onChangeHandler(event)}
                    name={this.props.name}
                >
                </input>
            </div>
        )
    }
}

export default ReactMaskedInput

Index.js

ReactDOM.render(<ReactMaskedInput
    id="myMaskedInput"
    header="Masked Input Phone"
    onChange={(event) => { deneme(event); }}
    dataMask={"({{999}}) {{999}}-{{9999}}"}
    name="maskedInput1"
    placeHolder="Please enter a valid phone number"
    validationInitiatorNr={10}
// onChange={(phoneNr) => validatePhone(phoneNr)}
/>, document.getElementById('myFormattedInput'))

You are using it like Jquery works with it and its bad. I recommend you to those libraries which are designed to work in react. In your case this may help you: https://github.com/s-yadav/react-number-format — Alireza HI, Aug 01 '19 at 11:23
Good suggestion but I need stick with a styling library called Limitless to style the elements — Capan, Aug 01 '19 at 11:26
You can keep Limitless as it seems is a `css library`. but for your `js libraries` you need to use react prepared libraries. — Alireza HI, Aug 01 '19 at 11:34
Since you don't have a working demo, I think that what is happening is: the formatter js puts it's own onChange handler on the input, this is how it can format the values inside. It's generally not good to introduce jquery inside react, but since you do, this is probably what happens. If you can, do a working demo on codesandbox or somewhere, and I'll take a look. — Javid Asgarov, Aug 01 '19 at 12:09

score 0 · Answer 1 · answered Aug 01 '19 at 11:38

Fix your onChangeHandler code

You have to call the 'onChange' handler you passed as an attribute in code of your ReactMaskedInput class explicitly. I guess you are assuming that it would get called automatically. Note that ReactMaskedInput is a component you created, and not an HTML tag 'onChange' of which gets called by React.

onChangeHandler(event) {
    this.setState(() => ({
       value: event.target.value
    }), () => {
       this.props.onChange(event) // Call 'onChange' here
       alert(this.state.value) // alert should be inside setState callback
    })
}

Sorry, still the same. I've changed the code accordingly. When I change the value inside the box it is still not calling **onChangeHandler** function — Capan, Aug 01 '19 at 11:46

React onChange doesn't fire on text input when formatter.js is used

1 Answers1