如何在 React 中在元素新增至 DOM 時設定焦點?

我有一個包含簡單表單的模態對話框,其中只有一個 input 欄位,我希望當模態對話框由 React 添加到 DOM 時,該元素能夠自動獲得焦點。

我開始思考許多不同的方式來實現這樣的效果,或許使用 useEffect() 來在組件添加到 DOM 時觸發事件,或者使用 ref 屬性來創建對 DOM 元素的引用並調用其 focus() 方法。不過後來我意識到我想得太複雜了,只需要在元素上使用 HTML 的 autofocus 屬性就可以解決這個問題。

果然如此。請記住,在 JSX 中它是 autoFocusF 是大寫的:

<input
  autoFocus
  ...// 其他輸入欄位的屬性