Que sont les arbitres en réaction

Refs in React est un attribut spécial pris en charge par React. Cet attribut spécial nous permet de faire référence à l'instance de support correspondante renvoyée par render(). De cette façon, nous pouvons garantir que nous obtenons toujours la bonne instance à tout moment.

L'environnement d'exploitation de ce tutoriel : système Windows10, version React16 Cette méthode convient à toutes les marques d'ordinateurs.

(Partage de vidéos d'apprentissage : Tutoriel React)

Introduction à l'attribut :

React prend en charge un attribut très spécial Ref, que vous pouvez utiliser pour lier Targeted à n’importe quel composant généré par render().

Cet attribut spécial vous permet de référencer l'instance de support correspondante renvoyée par render(). Cela garantit que vous obtenez toujours la bonne instance à tout moment.

Utilisation :

Lier un attribut ref à la valeur de retour du rendu :

<input ref="myInput" />

Dans un autre code, obtenez l'instance de support via this.refs :

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

Exemple :

Utilisez ceci pour obtenir le composant React actuel, ou utilisez ref pour obtenir la référence du composant, comme suit :

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

Dans l'exemple, nous obtenons la zone de saisie La référence de l'instance de support, la zone de saisie obtient le focus après avoir cliqué sur le bouton.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!