React supports a very special attribute Ref that you can use to bind to any component output by render().

React Refs syntax

This special attribute allows you to reference the corresponding backing instance returned by render(). This ensures that you always get the correct instance at any time.

React Refs example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php.cn React 實例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.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>

Run instance ?

Click the "Run instance" button to view the online instance