React の ref とは何ですか-jsチュートリアル-php.cn

React の ref とは何ですか

王林

リリース： 2020-11-30 14:39:00

オリジナル

2697 人が閲覧しました

React の

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

React の ref とは何ですか

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。