react中如何設置focus

這篇文章主要介紹了react中如何設置focus的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react中如何設置focus文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)建站是一家網站設計公司，集創(chuàng)意、互聯(lián)網應用、軟件技術為一體的創(chuàng)意網站建設服務商，主營產品：響應式網站設計、成都品牌網站建設、營銷型網站。我們專注企業(yè)品牌在網站中的整體樹立，網絡互動的體驗，以及在手機等移動端的優(yōu)質呈現(xiàn)。網站設計、成都網站設計、移動互聯(lián)產品、網絡運營、VI設計、云產品.運維為核心業(yè)務。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞析悅目的作品，網站的價值服務。

react中設置focus的方法：1、在componentDidMount中使用DOM元素；2、調用“this.input.focus()”的 DOM API即可使整體達到頁面加載完成就自動focus到輸入框的功能。

React 進入頁面以后自動 focus 到某個輸入框

react中如何設置focus

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

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

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

React.js 當中提供了 ref 屬性來幫助我們獲取已經掛載的元素的 DOM 節(jié)點，你可以給某個 JSX 元素加上 ref屬性。

可以看到我們給 input 元素加了一個 ref 屬性，這個屬性值是一個函數(shù)。當 input 元素在頁面上掛載完成以后，React.js 就會調用這個函數(shù)，并且把這個掛載以后的 DOM 節(jié)點傳給這個函數(shù)。在函數(shù)中我們把這個 DOM 元素設置為組件實例的一個屬性，這樣以后我們就可以通過 this.input 獲取到這個 DOM 元素。

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

我們可以給任意代表 HTML 元素標簽加上 ref 從而獲取到它 DOM 元素然后調用 DOM API。但是記住一個原則：能不用 ref 就不用。特別是要避免用 ref 來做 React.js 本來就可以幫助你做到的頁面自動更新的操作和事件監(jiān)聽。多余的 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>

另一種寫法：

<!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 MyComponent extends React.Component {
  constructor(props) {
    super(props);
 
    this.inputRef = React.createRef();
  }
 
  render() {
    return <input type="text" ref={this.inputRef} />;
  }
 
  componentDidMount() {
    this.inputRef.current.focus();
  }
}
 
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);
</script>
</body>
</html>

關于“react中如何設置focus”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react中如何設置focus”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網頁題目：react中如何設置focus
鏈接分享：http://muchs.cn/article10/jehodo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、服務器托管、微信小程序、商城網站、定制開發(fā)、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網站優(yōu)化