React Refs · 前端開發手冊

# React Refs React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。這個特殊的屬性允許你引用 render() 返回的相應的支撐實例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實例。 ## 使用方法綁定一個 ref 屬性到 render 的返回值上： ~~~ <input ref="myInput" /> ~~~ 在其它代碼中，通過 this.refs 獲取支撐實例: ~~~ var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect(); ~~~ ## 完整實例你可以通過使用 this 來獲取當前 React 組件，或使用 ref 來獲取組件的引用，實例如下： ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鳥教程 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> ~~~ 實例中，我們獲取了輸入框的支撐實例的引用，子點擊按鈕后輸入框獲取焦點。我們也可以使用 getDOMNode()方法獲取DOM元素