reagire Refs

Reagire a sostenere una proprietà molto specialeRef, è possibile utilizzare per legarsi al render () su qualsiasi componente della produzione.

Questa struttura speciale consente di fare riferimento a render () restituisce un'istanza del (istanza backup) di supporto corrispondente. Ciò garantisce che in qualsiasi momento è sempre per ottenere l'istanza corretta.

uso

Associazione di un attributo ref per rendere il valore di ritorno:

<input ref="myInput" />

In altri esempi di codice per ottenere sostegno attraverso this.refs:

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

esempio completo

È possibile ottenere utilizzando questa corrente Reagire assemblaggio oppure usa l'arbitro per ottenere un componente di riferimento, esempi sono i seguenti:

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

Prova »

Esempio, otteniamo un riferimento ad un esempio di supporto casella di input, fare clic sul pulsante per accedere al sotto-frame ottiene la messa a fuoco.

Possiamo anche utilizzare il metodo getDOMNode () per ottenere l'elemento DOM