使用 react ref 作为 jquery 的选择器

Question

如何在没有指定 id 的情况下将 React Ref 与 jQuery lib 一起用于输入？

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

我想分享一下我的经验

Answer 1

这很简单，但在文档中不清楚。

ref.current 引用使用过的 DOM 元素并允许 jQuery

访问它

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

Answer 2

如 React 文档中所述，标题为 "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.

此外，如 jQuery 文档中所述，标题为 "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.

结合这两个描述我们可以说，要使用 react ref 作为 jquery 的选择器，我们可以简单地做：

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

其中，this.ref.current 是普通的 DOM 元素。