reactのinputタグでひらがな→カタカナに自動変換ができない

Question

reactでinputタグにひらがなを入力するときカタカナに自動変換したいですが、

ひらがな→ひらがな（自動変換しない場合）
PC版、不具合なし
スマホ版、不具合なし

ひらがな→カタカナ（自動変換する場合）
PC版、不具合なし
スマホ版、不具合あり

スマホで入力すると正しく自動変換ができません。
これを解決する方法がわかりません、、

※下記のパスで動作確認やソースコード確認ができます。
https://codepen.io/kcjfgnl9205/pen/jOQwrNr

Answer 1

元のソース見ましたが、込み入った作業は不要で、useStateで入力値を同期するだけで実現できます。

import {useState} from 'react'
const [word,setWord] = useState(null)
//文字のバインド
	const bindWord = (e)=>{
		let word = e.target.value
		word = word.replace(/[\u3041-\u3096]/g, function(match) {
			let chr = match.charCodeAt(0) + 0x60;
			return String.fromCharCode(chr);
		})
        　　　setWord(word); //入力文字の同期
	}

return(
       <input type="text" onChange={bindWord} value={word}/>
)

あとは変換部分を適宜useCallbackフックなどを使っておけばいいのかなと思います。

import {useState,useCallback} from 'react'
//文字のバインド
export const App = ()=>{
  const [word,setWord] = useState('')
  const replace_word = useCallback((wd)=>{
		return wd.replace(/[\u3041-\u3096]/g, (match)=>{
			let chr = match.charCodeAt(0) + 0x60;
			return String.fromCharCode(chr);
    })
  },[])
	const bindWord = (e)=>{
		let word = e.target.value
		word = replace_word(word)
    setWord(word); //入力文字の同期
  }
  return(
      <>
         <input type="text" onChange={bindWord} value={word}/>
      </>
  )
}
export default App;

Answer 2

入力中に変換するとIMEと干渉してトラブルを起こしやすいです。

動作性を考えて問題がないなら、フォーカスが外れた瞬間に変換をかけるのが妥当かと思います。