réagir Refs

Réagir à soutenir une propriété très spécialeRef, vous pouvez utiliser pour se lier à la render () sur une composante de la sortie.

Cette propriété spéciale vous permet de référencer render () retourne une instance de la (par exemple la sauvegarde) support correspondant. Cela garantit que, à tout moment est toujours d'obtenir l'instance correcte.

utilisation

Reliure un attribut ref pour rendre la valeur de retour:

<input ref="myInput" />

Dans d'autres exemples de code pour obtenir un soutien par le biais this.refs:

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

exemple complet

Vous pouvez obtenir en utilisant ce courant Réagissez ensemble, ou utilisez l'arbitre pour obtenir un composant de référence, les exemples sont les suivants:

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

Essayez »

Exemple, nous obtenons une référence à un exemple de l'appui de la zone de saisie, cliquez sur le bouton pour entrer dans le sous-châssis obtient le focus.

Nous pouvons également utiliser la méthode getDOMNode () pour obtenir l'élément DOM