ReactJSで入力要素がフォーカスされているかどうかを検出する

質問

ReactJSのレンダー関数内で、以下のような入力要素が現在フォーカスされているかどうかを検出するにはどうしたらよいでしょうか。

<input type="text" style={searchBoxStyle} placeholder="Search"></input>   

どのように解決するのですか？

に対してチェックすることができます。 document.activeElement をチェックすることができます。

const searchInput = React.useRef(null)

if (document.activeElement === searchInput.current) {
  // do something
}

return <input type="text" ref={searchInput} />

他の方法としては、イベントリスナーを focus と blur というイベントが入力フィールドの中にあります。

const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)

return <input type="text" onFocus={onFocus} onBlur={onBlur} />

これは、ノードがフォーカスされたりぼかされたりするたびに再レンダリングを呼び出すことに注意してください（しかし、これはあなたが望むことですよね？）