Latest web development tutorials

参考文献を反応させます

非常に特別なプロパティ文献をサポートするように反応するあなたは、出力の任意のコンポーネント上にレンダリング()にバインドするために使用することができます。

この特別なプロパティは、()対応支援(バックアップインスタンス)のインスタンスを返すレンダリング参照することができます。 これは、任意の時点で正しいインスタンスを取得するために常にであることを保証します。

使用

戻り値を描画するためにREF属性を結合:

<input ref="myInput" />

this.refsを介して支持を得るために、他のコード例では:

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

完全な例

あなたはこの電流リアクトアセンブリを使用して取得、または基準成分を取得するために、参考文献を使用することができ、次のように、例を示します。

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

»をお試しください

例では、我々はサポート入力ボックスの例への参照を取得し、サブフレームがフォーカスを取得した入力ボタンをクリックします。

また、DOM要素を取得するためにgetDOMNode()メソッドを使用することができます