How do you call a jQuery function on a ReactJS element from .jsx script?

Question

I've just started learning ReactJS and there's this thing that occurred to me.

For example:

The function that I would like to execute against a reactjs element:

function initializeInput(selector, color) {
    // just an example function
    $(selector).css("font-size", "21pt");
}

And a part of my .jsx file:

var myInput = React.createClass({
componentDidMount: function () {
    initializeInput("#" + this.props.inputId);
},
render: function() {
    return (
        <input type="text" value="text goes here" 
               name={this.props.inputName} 
               id={this.props.inputId}/>
    );
}
});

This function is called successfully, however nothing happens and it seems that things don't just work out that way with jQuery and React. Is it even good to mix them up like that? Thanks.

When I log it in the console it is the appropriate selector... — Martin Shishkov
– Martin Shishkov, Commented Jun 25, 2016 at 7:06

Piyush.kapoor · Accepted Answer · 2016-06-25 08:58:21Z

5

Jquery works very well with Reactjs . You can call jquery function after react render ie in componentDidMount and

You can react refs for that. Lets say you want a tooltip

var myInput = React.createClass({
componentDidMount: function () {
    $(this.refs.tooltip).tooltip();
},
render: function() {
    return (
        <input ref="tooltip" type="text" value="text goes here" 
               name={this.props.inputName} 
               id={this.props.inputId}/>
    );
}
});

edited Jun 25, 2016 at 8:58

answered Jun 25, 2016 at 7:02

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Martin Shishkov Over a year ago

Can you demonstrate with some example code, please?

Martin Shishkov Over a year ago

I get an error saying findDOMNode() is not a function, strange :(

Piyush.kapoor Over a year ago

just remove react.findDomnode its been deprecated

Martin Shishkov Over a year ago

Thank for noting that out! I will accept your answer since you were the first one to write it. However can you explain why do I have to use refs instead of selecting the items with a regular css selector?

Piyush.kapoor Over a year ago

Generally not recommended in react. Using refs ( they are just dom nodes) are the best way to access dom value

Vitaly Kravtsov · Accepted Answer · 2016-06-25 07:29:59Z

2

First you need to render component elements (render function) then call your jquery code in componentDidMount handler

http://jsbin.com/zupagav/1/edit?js,console,output

answered Jun 25, 2016 at 7:29

Vitaly Kravtsov

9705 silver badges21 bronze badges

Comments

jaybee · Accepted Answer · 2016-06-25 08:34:17Z

2

I believe using this.refs is the way. I don't think you should need React.findDomNode. More about refs from the React docs.

var myInput = React.createClass({
  componentDidMount: function () {
    initializeInput(this.refs.inputId);
  },

  render: function() {
    return (
      <input 
        ref="myInput"
        type="text" 
        value="text goes here" 
        name={this.props.inputName} 
        id={this.props.inputId} />
    );
  }
});

This is useful for use with third party libraries like jQuery, d3, doing canvas stuff, and more.

answered Jun 25, 2016 at 8:34

jaybee

2,30016 silver badges21 bronze badges

2 Comments

Martin Shishkov Over a year ago

Thanks for your answer... I gave it a vote up but since #Piyush.kapoor was first I think it is fair that he gets the accepted answer.

Bhaumik Bhatt Over a year ago

I have a .js file in my public folder how do I call the function in that file from a component using jQuery?

Collectives™ on Stack Overflow

How do you call a jQuery function on a ReactJS element from .jsx script?

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related