快捷導(dǎo)航

React 進(jìn)入頁(yè)面后自動(dòng) focus 到某個(gè)輸入框的解決方案

更新時(shí)間：2024年02月20日 15:29:18 作者：徐同保

React.js 當(dāng)中提供了 ref 屬性來(lái)幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點(diǎn),你可以給某個(gè) JSX 元素加上 ref屬性,這篇文章主要介紹了React 進(jìn)入頁(yè)面以后自動(dòng) focus 到某個(gè)輸入框,需要的朋友可以參考下

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 進(jìn)入頁(yè)面以后自動(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)入頁(yè)面以后自動(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 進(jìn)入頁(yè)面以后自動(dòng) focus 到某個(gè)輸入框的文章就介紹到這了,更多相關(guān)React 自動(dòng) focus 輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: