Latest web development tutorials

Реагировать Refs

Реагировать поддерживать очень особое свойствоRef, вы можете использовать для привязки к визуализации () на любой компонент продукции.

Это особое свойство позволяет ссылаться на визуализации () возвращает экземпляр (например, бэк) соответствующая поддержка. Это гарантирует, что в любой момент всегда, чтобы получить правильный экземпляр.

использование

Связывание реф атрибут для отображения возвращаемого значения:

<input ref="myInput" />

В других примерах кода, чтобы получить поддержку через this.refs:

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

Полный пример

Вы можете получить с помощью этого тока Реагировать сборки или использовать реф для получения опорного компонента, примеры являются следующие:

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

Попробуйте »

Например, мы получаем ссылку на примере поддержки в поле ввода, нажмите кнопку, чтобы войти в подрамник получает фокус.

Мы также можем использовать метод getDOMNode (), чтобы получить элемент DOM