참고 문헌 반응

아주 특별한 속성참조를 지원하기 위해 반응,당신은 출력의 구성 요소의 렌더링 ()에 결합하는 데 사용할 수 있습니다.

이 특별한 속성은 () 대응 지원 (백업 인스턴스)의 인스턴스를 반환 렌더링 참조 할 수 있습니다. 이것은 어떤 시간에 올바른 인스턴스를 얻을 항상 보장.

용도

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

»시도

예, 우리는 지원 입력 상자의 예에 대한 참조를 가져, 서브 프레임에 포커스를 가져옵니다 입력 버튼을 클릭합니다.

우리는 또한 DOM 요소를 얻을 수 getDOMNode () 메서드를 사용할 수 있습니다