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

それはとても単純ですが、ドキュメントでは明確ではありません。

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 に答える
1

「Refs and the DOM」というタイトルの反応ドキュメントで述べたように

const node = this.myRef.current;

ref 属性が HTML 要素で使用されると、 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.

これら 2 つの説明を組み合わせると、react ref を jquery のセレクターとして使用するには、次のように簡単に実行できます。

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

ここで、this.ref.currentはプレーンな DOM 要素です。

于 2020-03-05T13:52:35.927 に答える