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.

Answer 1

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}/>
    );
}
});

Answer 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

Answer 3

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.