React Refs

React wspierać bardzo szczególne własnościRef można użyć do wiązania tynku () na którykolwiek składnik wyjścia.

Ta szczególna właściwość pozwala odwoływać render () zwraca instancję (np podłoża) odpowiednie wsparcie. To gwarantuje, że w każdej chwili jest zawsze uzyskać właściwe wystąpienie.

stosowanie

Oprawa atrybut ref do renderowania zwracanej wartości:

<input ref="myInput" />

Innymi przykładami kodu, aby uzyskać wsparcie poprzez this.refs:

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

Kompletny przykład

Można uzyskać stosując ten prąd React montaż lub użyj ref uzyskania komponentu odniesienia, przykłady przedstawiają się następująco:

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

Spróbuj »

Przykład, mamy odniesienie do przykładu wsparciu polu tekstowym, kliknij przycisk, aby wprowadzić rama dostaje ostrość.

Możemy również użyć metody getDOMNode (), aby uzyskać elementu DOM