React獲取底層DOM節點ref屬性

在React中，有時需要訪問底層DOM節點來執行一些命令式操作。

class Focus extends React.Component {
	constructor(props) {
  		super(props)
	    this.handleClick = this.handleClick.bind(this)
	}
	handleClick() {
  		this.element.focus()
	}
	render() {
  		return (
		    <form>
		      <input type="text"
		       ref={element => (this.element = element)}  />
		      <button onClick={this.handleClick}>Focus</button>
		    </form>
		  )
	}
}

我們創建了一個表單，其中包含一個輸入元素，並在該元素的ref屬性上定義了一個回調函數。

這個回調函數會在組件掛載時被調用，元素參數表示輸入的DOM實例。值得注意的是，卸載組件時也會調用這個回調，並傳入null參數來釋放內存。回調函數要做的就是保存元素對象的引用，方便以後使用（如在handleClick方法觸發時使用）。接着我們定義了按鈕元素及其事件處理器。在瀏覽器執行以上代碼後就會顯示帶有輸入框和按鈕的表單，點擊按鈕後就會按預期那樣聚焦輸入框。

一般情況下應該儘量避免使用ref，因爲它們讓代碼更偏向命令式，可讀性與可維護性都變差了。