ant-design輸入框自動擷取焦點

需求：

在做移動端項目時，引入Input輸入框，當使用Input輸入框的時候希望自動擷取焦點，這樣的話在移動端輸入法就會自動彈起，友善使用者使用。

實作：

<Input
    ref={function (input) {
      if (input != null) {
        input.focus();
      }
    }}
  />
           

為什麼

在 React.js 當中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on* 方法幫助我們進行事件監聽，是以 React.js 當中不需要直接調用 addEventListener 的 DOM API；以前我們通過手動 DOM 操作進行頁面更新（例如借助 jQuery），而在 React.js 當中可以直接通過 setState 的方式重新渲染元件，渲染的時候可以把新的 props 傳遞給子元件，進而達到頁面更新的效果。

React.js 這種重新渲染的機制幫助我們免除了絕大部分的 DOM 更新操作，也讓類似于 jQuery 這種以封裝 DOM 操作為主的第三方的庫從我們的開發工具鍊中删除。

但是 React.js 并不能完全滿足所有 DOM 操作需求，有些時候我們還是需要和 DOM 打交道。比如說你想進入頁面以後自動 focus 到某個輸入框，你需要調用 input.focus() 的 DOM API，比如說你想動态擷取某個 DOM 元素的尺寸來做後續的動畫，等等。

React.js 當中提供了 ref 屬性來幫助我們擷取已經挂載的元素的 DOM 節點，你可以給某個 JSX 元素加上 ref屬性：

class AutoFocusInput extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}

ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById('root')
)
           

可以看到我們給 input 元素加了一個 ref 屬性，這個屬性值是一個函數。當 input 元素在頁面上挂載完成以後，React.js 就會調用這個函數，并且把這個挂載以後的 DOM 節點傳給這個函數。在函數中我們把這個 DOM 元素設定為元件執行個體的一個屬性，這樣以後我們就可以通過 this.input 擷取到這個 DOM 元素。

然後我們就可以在 componentDidMount 中使用這個 DOM 元素，并且調用 this.input.focus() 的 DOM API。整體就達到了頁面加載完成就自動 focus 到輸入框的功能（大家可以注意到我們用上了 componentDidMount 這個元件生命周期）。

我們可以給任意代表 HTML 元素标簽加上 ref 進而擷取到它 DOM 元素然後調用 DOM API。但是記住一個原則：能不用 ref 就不用。特别是要避免用 ref 來做 React.js 本來就可以幫助你做到的頁面自動更新的操作和事件監聽。多餘的 DOM 操作其實是代碼裡面的“噪音”，不利于我們了解和維護。

順帶一提的是，其實可以給元件标簽也加上 ref ，例如：

這樣你擷取到的是這個 Clock 元件在 React.js 内部初始化的執行個體。但這并不是什麼常用的做法，而且也并不建議這麼做，是以這裡就簡單提及，有興趣的朋友可以自己學習探索。

摘自React.js小書