React の ref とは何ですか

React の

refs は、react によってサポートされる特別な属性です。この特別な属性を使用すると、render() によって返される対応するサポート インスタンスを参照できます。こうすることで、いつでも正しいインスタンスを確実に取得できるようになります。

このチュートリアルの動作環境: Windows10 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

(学習ビデオ共有: react チュートリアル)

属性の紹介:

React は、ターゲットをバインドするために使用できる非常に特殊な属性 Ref をサポートしています。 render() によって出力された任意のコンポーネントに。

この特別なプロパティを使用すると、render() によって返される対応するバッキング インスタンスを参照できます。これにより、いつでも常に正しいインスタンスを取得できるようになります。

使用法:

ref 属性を render の戻り値にバインドします:

<input ref="myInput" />

他のコードでは、this.refs:

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

# を通じてサポート インスタンスを取得します。 ##例:

次のように、これを使用して現在の React コンポーネントを取得するか、ref を使用してコンポーネント参照を取得します。

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>    );  }}
 ReactDOM.render(
  <MyComponent />,  document.getElementById(&#39;example&#39;));

この例では、入力ボックスを取得します。サポートするインスタンスの参照。子がボタンをクリックした後、入力ボックスがフォーカスを取得します。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

以上がReact の ref とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。