Использовать реагирующий реф как селектор для jquery - PullRequest
Новая
       27

Использовать реагирующий реф как селектор для jquery

1 голос
/ 05 марта 2020

Как использовать 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);
  }

Я хотел бы поделиться опытом, насколько я его узнал

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Как упомянуто в документах реагирования, под названием "Refs and the DOM" 

const node = this.myRef.current;

Когда атрибут ref используется в элементе HTML, ссылка создается в конструкторе с React.createRef () получает базовый элемент 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.

Комбинируя эти два описания, мы можем сказать, что для использования реакции ref в качестве селектора для jquery мы можем просто сделать: 

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

где, this.ref.current это простой элемент DOM.

1 голос
/ 05 марта 2020

это так просто, но не ясно и не упоминается в документации.

ref.current относится к используемому элементу DOM и позволяет получить к нему доступ для jQuery

    $(this.ref.current).val(value);
    $(this.ref.current).mask(mask, options);
...