반응 참조


React는 render()에 의해 출력되는 모든 구성 요소에 바인딩하는 데 사용할 수 있는 매우 특별한 속성 Ref을 지원합니다.

이 특수 속성을 사용하면 render()에서 반환된 해당 지원 인스턴스를 참조할 수 있습니다. 이렇게 하면 언제든지 항상 올바른 인스턴스를 얻을 수 있습니다.

사용 방법

ref 속성을 render:

<input ref="myInput" />

의 반환 값에 바인딩합니다. 다른 코드에서는 this.refs:

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

Full 인스턴스를 통해 지원 인스턴스를 가져옵니다.

이 구성 요소를 사용하여 현재 React를 가져올 수 있습니다. , 또는 ref를 사용하여 구성 요소의 참조를 가져오는 경우 예제는 다음과 같습니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    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')
    );
    </script>
  </body>
</html>

예제 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

에서 예를 들어, 입력 상자는 인스턴스 참조를 지원하고, 입력 상자는 버튼을 클릭한 후에 포커스를 얻습니다.

또한 getDOMNode() 메서드를 사용하여 DOM 요소를 가져올 수도 있습니다