React unterstützt ein ganz besonderes Attribut Ref, das Sie zum Binden an jede Komponentenausgabe von render() verwenden k?nnen.

Reagieren Sie Refs Syntax

Mit dieser speziellen Eigenschaft k?nnen Sie auf die entsprechende von render() zurückgegebene Backing-Instanz verweisen. Dadurch ist sichergestellt, dass Sie jederzeit die richtige Instanz erhalten.

Reagieren Sie Refs Beispiel

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

Instanz ausführen ?

Klicken Sie auf die Schaltfl?che ?Instanz ausführen“, um die Online-Instanz anzuzeigen