Use react ref as selector for jquery

Question

How to use React Ref together with jQuery lib without specified id to the input?

import $ from 'jquery';
import 'jquery.mask.js';

class PhoneComponent extends React.Component {
  ref = React.createRef();

  state = {value: ''};

  componentDidMount() {
    this.renderMask();
  }

  render() {
    return (
      <input ref={this.ref} type="text"/>
    )
  }


  renderMask() {
    const { value } = this.state;
    const options = {
      onKeyPress: (cep, e) => this.ref.current.value = cep
    };
    $(***???***).val(value);
    $(***???***).mask('+38(###)###-##-##', options);
  }

I would like to share experience as far as i found out it

Alexey Nikonov · Accepted Answer · 2021-02-11T19:39:19.003

2

that is so simple but not clear in docs.

The ref.current refers to used DOM element and allows to access it for jQuery

class YourComponent extends React.Component{
  this.ref = React.createRef();
  ...
  doSomething = () => {
    $(this.ref.current).val(value);
    $(this.ref.current).mask(mask, options);
  }
}

edited Feb 11 '21 at 19:39

answered Mar 05 '20 at 13:27

Alexey Nikonov

4,958
5
39
66

2

Actually it is documented: https://api.jquery.com/jQuery/#jQuery-element – trixn Mar 05 '20 at 13:36

score 2 · Answer 2 · answered Mar 05 '20 at 13:52

As mentioned in react docs, titled "Refs and the DOM"

const node = this.myRef.current;

When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.

Also, as mentioned in jQuery docs, titled "How do I select elements when I already have a DOM element?"

If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object.
var myDomElement = document.getElementById( "foo" ); // A plain DOM element. 
$( myDomElement ).find( "a" ); // Finds all anchors inside the DOM element.

Combining these two descriptions we can say that, to use react ref as a selector for jquery we can simply do:

$( this.ref.current ).val(value);
$( this.ref.current ).mask('+38(###)###-##-##', options);

where, this.ref.current is a plain DOM element.

Make sure you check for undefined and interact with this using a useEffect to prevent trying to access it before it's created. — Liam, Feb 19 '23 at 17:42

Use react ref as selector for jquery

2 Answers2