React menyokong Ref atribut yang sangat istimewa yang boleh anda gunakan untuk mengikat mana-mana output komponen dengan render().

React Refs sintaks

Harta istimewa ini membolehkan anda merujuk contoh sandaran sepadan yang dikembalikan oleh render(). Ini memastikan anda sentiasa mendapat contoh yang betul pada bila-bila masa.

React Refs contoh

<!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 ?

Klik butang "Run Instance" untuk melihat instance dalam talian