reaccionar Refs

Reaccionar a apoyar una propiedad muy especialRef, se puede utilizar para enlazar con el render () en cualquier componente de la salida.

Esta propiedad especial permite hacer referencia a render () devuelve una instancia de la (instancia copias) de soporte correspondiente. Esto asegura que en todo momento es siempre para obtener la instancia correcta.

uso

La vinculación de un atributo ref para representar el valor de retorno:

<input ref="myInput" />

En otros ejemplos de código para obtener apoyo a través de this.refs:

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

ejemplo completo

Usted puede conseguir mediante el uso de esta corriente conjunto de reaccionar, o bien utiliza el árbitro para obtener un componente de referencia, los ejemplos son los siguientes:

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

Trate »

Ejemplo, se obtiene una referencia a un ejemplo del soporte de la caja de entrada, haga clic en el botón para entrar en el sub-marco se activa.

También podemos usar el método getDOMNode () para obtener el elemento DOM