CODEWITHSUNDEEP
javascriptjqueryreactjs
sjishan
sjishan

Reputation: 3672

React : Grab change on input value done by jQuery

Not a fan of mixing jQuery with React but I liked a color picker called Farbstastic so I embedded it as a component in my React app. There is an input field as type hidden where the value gets changed when user interact the with color picker. I want to grab the value in React using onChange event.

enter image description here

This is my react code to grab the change:

class Color extends Component {    
    render() {
        return (
            <div>

                <label htmlFor="color">Color:</label>

                <input type="hidden" id="color" name="color" value="#123456"  onChange={event => { console.log(event.target.value);} }/>
                <div id="picker"></div>

            </div>
        )
    }
}

The problem is it does not grab the change on value by jQuery.

Upvotes: 0

Views: 240

Answers (1)

Subin Sebastian
Subin Sebastian

Reputation: 10997

You use case is called uncontrolled components in react world. https://reactjs.org/docs/uncontrolled-components.html

So basically you have to use ref to access value of this input in your react class methods.

      <input type="hidden" id="color" name="color" value="#123456" 
        ref={(input) => this.colorCodeInput = input}/>
      <div id="picker"></div>

Now in your submit function you can access the value set like 

onSubmit() {
  let colorCode = this.colorCodeInput.value.
}

Upvotes: 1

Related Questions