react中如何設(shè)置focus

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

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

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

React 進(jìn)入頁面以后自動(dòng) focus 到某個(gè)輸入框

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

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

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

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

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

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

我們可以給任意代表 HTML 元素標(biāo)簽加上 ref 從而獲取到它 DOM 元素然后調(diào)用 DOM API。但是記住一個(gè)原則：能不用 ref 就不用。特別是要避免用 ref 來做 React.js 本來就可以幫助你做到的頁面自動(dòng)更新的操作和事件監(jiān)聽。多余的 DOM 操作其實(shí)是代碼里面的“噪音”，不利于我們理解和維護(hù)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 進(jìn)入頁面以后自動(dòng) focus 到某個(gè)輸入框</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 進(jìn)入頁面以后自動(dòng) focus 到某個(gè)輸入框</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>

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

網(wǎng)頁題目：react中如何設(shè)置focus
鏈接分享：http://www.rwnh.cn/article10/jehodo.html

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

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

react中如何設(shè)置focus