React，在元素新增至 DOM 時將焦點設定至項目

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

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

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

果然如此。請記住，在 JSX 中它是 autoFocus，F 是大寫的：

1
2
3

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

tags: [“React”, “DOM”, “autoFocus”]