Was sind Refs in React

refs in „react“ ist ein spezielles Attribut, das von „react“ unterstützt wird. Dieses spezielle Attribut ermöglicht es uns, auf die entsprechende von render() zurückgegebene Support-Instanz zu verweisen. So können wir sicherstellen, dass wir jederzeit die richtige Instanz erhalten.

Die Betriebsumgebung dieses Tutorials: Windows10-System, React16-Version. Diese Methode ist für alle Computermarken geeignet.

(Lernvideo-Sharing: React-Tutorial)

Attributeinführung:

React unterstützt ein ganz besonderes Attribut Ref, das Sie zum Binden an jede Komponentenausgabe von render() verwenden können.

Mit dieser speziellen Eigenschaft können Sie auf die entsprechende von render() zurückgegebene Backing-Instanz verweisen. Dadurch ist sichergestellt, dass Sie jederzeit die richtige Instanz erhalten.

Verwendung:

Binden Sie ein Ref-Attribut an den Rückgabewert von render:

<input ref="myInput" />

In anderen Codes erhalten Sie die Support-Instanz über this.refs:

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

Beispiel:

Rufen Sie die aktuelle Reaktion mithilfe dieser Komponente ab. oder verwenden Sie ref, um die Referenz der Komponente wie folgt abzurufen:

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

Im Beispiel erhalten wir die Referenz der unterstützenden Instanz des Eingabefelds, und das Eingabefeld erhält den Fokus, nachdem Sie auf die Schaltfläche geklickt haben.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWas sind Refs in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!