f

2711 ワード
React テキストリンク

Refとは?


RefはDOMノードとReact要素にアクセスする方法を提供する.
このRefを使用すると、次のことができます.
  • フォーカスを管理し、テキスト選択またはメディア再生を管理します.
  • で必要なアニメーションを直接実行できます.
  • サードパーティ製DOMライブラリとreactを組み合わせて
    • を使用
    私の場合はfocusを起動している間にRefを知りました.

    Refの作成


    RefはReactcreateRef()で作成し、refプロパティでreact要素に接続します.
    この接続は、構成部品のインスタンスを作成すると追加されます.したがって、インスタンスグローバルでRefにアクセスできます.
    class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

    Refへのアクセス

    renderメソッドでは、refが要素に渡されると、refのcurrentプロパティはノードを参照する.

    これは私の実験の結果です.
    公式文書の流れに従って
    inputtagにref = {this.textInput}を入れ、構造関数によりthis.textInput = React.createRef()を生成する.
    このように、この素子の他の方法ではthis.textInput.currentが写っており、以下のノード要素が写っていることが確認できます.
    その部分に集中するとつまり、this.textInput.current.focus()を撮影すれば、直接焦点展開を指定することができる.
    もしよろしければ、componentDidMountなどを利用して、最初からfocusを指摘することができます.
    babel 7.x.x ReferenceError:再生器Runtimeはasyncを定義していません.応答待ちエラーが発生した場合
    変数とメソッド