2

如何在没有指定 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);
  }

我想分享我发现的经验

4

2 回答 2

1

如反应文档中所述，标题为“Refs and the DOM”

const node = this.myRef.current;

当在 HTML 元素上使用 ref 属性时，使用 React.createRef() 在构造函数中创建的 ref 接收底层 DOM 元素作为其当前属性。

另外，正如 jQuery 文档中提到的，标题为“当我已经有一个 DOM 元素时如何选择元素？”

如果您有一个包含 DOM 元素的变量，并且想要选择与该 DOM 元素相关的元素，只需将其包装在 jQuery 对象中即可。

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 元素。

于 2020-03-05T13:52:35.927 回答
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);
  }
}
于 2020-03-05T13:27:03.277 回答