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 實(shí)例</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 獲取焦點(diǎn)
        this.refs.myInput.focus();
      },
      render: function() {
        //  當(dāng)組件插入到 DOM 后，ref 屬性添加一個(gè)組件的引用于到 this.refs
        return (
          <div>
            <input type="text" ref="myInput" />
            <input
              type="button"
              value="點(diǎn)我輸入框獲取焦點(diǎn)"
              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