React 進入頁面之後自動 focus 到某個輸入框

時間 2019-11-08

標籤 react 進入頁面之後自動 focus 某個輸入欄目 React 简体版

原文原文鏈接

在 React.js 當中你基本不須要和 DOM 直接打交道。React.js 提供了一系列的 on* 方法幫助咱們進行事件監聽，因此 React.js 當中不須要直接調用 addEventListener 的 DOM API；之前咱們經過手動 DOM 操做進行頁面更新（例如藉助 jQuery），而在 React.js 當中能夠直接經過 setState 的方式從新渲染組件，渲染的時候能夠把新的 props 傳遞給子組件，從而達到頁面更新的效果。html

React.js 這種從新渲染的機制幫助咱們免除了絕大部分的 DOM 更新操做，也讓相似於 jQuery 這種以封裝 DOM 操做爲主的第三方的庫從咱們的開發工具鏈中刪除。react

可是 React.js 並不能徹底知足全部 DOM 操做需求，有些時候咱們仍是須要和 DOM 打交道。好比說你想進入頁面之後自動 focus 到某個輸入框，你須要調用 input.focus() 的 DOM API，好比說你想動態獲取某個 DOM 元素的尺寸來作後續的動畫，等等。babel

React.js 當中提供了 ref 屬性來幫助咱們獲取已經掛載的元素的 DOM 節點，你能夠給某個 JSX 元素加上 ref屬性。dom

能夠看到咱們給 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 操做實際上是代碼裏面的「噪音」，不利於咱們理解和維護。開發工具

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 進入頁面之後自動 focus 到某個輸入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}
ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById('root')
);
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。