reagieren Refs

Reagieren Sie eine ganz besondere EigenschaftRef zu unterstützen,können Sie auf die render () auf einer beliebigen Komponente des Ausgangs zu binden , verwenden.

Diese besondere Eigenschaft ermöglicht es Ihnen, () gibt eine Instanz der entsprechenden Unterstützung (Backing-Instanz) zu verweisen machen. Dadurch wird sichergestellt, dass zu jedem Zeitpunkt immer die korrekte Instanz zu erhalten.

Verwendung

ein Attribut ref Binding den Rückgabewert zu machen:

<input ref="myInput" />

In anderen Codebeispiele Unterstützung durch this.refs zu erhalten:

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

Komplettes Beispiel

Sie können diese aktuelle Assembly Reagieren erhalten durch die Verwendung oder die ref verwenden, um eine Referenzkomponente zu erhalten, Beispiele sind wie folgt:

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')
);

Versuchen »

Beispiel wir einen Verweis auf ein Beispiel für die Unterstützung das Eingabefeld zu erhalten, klicken Sie auf die Schaltfläche der Unterrahmen den Fokus erhält einzugeben.

Wir können auch GetDOMNode () Methode, um das DOM-Element verwenden