react中設定focus的方法：1、在componentDidMount中使用DOM元素；2、呼叫「this.input.focus()」的DOM API即可使整體達到頁面載入完成就自動focus到輸入框的功能。
本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
react中怎麼設定focus？
React 進入頁面以後自動 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屬性。
可以看到我們為 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>另一種寫法：
<!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影片教學》
以上是react中怎麼設定focus的詳細內容。更多資訊請關注PHP中文網其他相關文章！
