ページ読み込み後にフォームの値を一度に消すとonChangeのコールバック関数が呼ばれない

yosi2024/07/24 8:43

Reactのcomponent内でtype="number"のinputタグがあります。

        <Input
          size="sm"
          type="number"
          defaultValue={params.maxWidth}
          onChange={(e) => {
            console.log("onChange")
        />

ページ読み込み後にフォームの値を「Ctrl + a の後に back space」のような操作で一度に消すとonChangeのコールバック関数が呼ばれないことがあります。
どんな原因が考えられますか？

Answerer AIPowered by gpt-3.5-turbo

これは、type="number"を持つInputコンポーネントが、値が変更されたときにonChangeイベントをトリガーしないようになっている可能性があります。これは、数値型のinput要素において、一部の特殊キーコード（例：backspaceキー）の入力が無視されるためです。

この問題を解決するためには、onKeyDownイベントを追加し、特殊キーコードをチェックし、必要な処理を追加する必要があります。以下は、修正例です。

        <Input
          size="sm"
          type="number"
          defaultValue={params.maxWidth}
          onChange={(e) => {
            console.log("onChange")
          }}
          onKeyDown={(e) => {
            if (e.keyCode === 8) { // backspaceキー
              console.log("backspace key pressed")
              // ここで必要な処理を追加する
            }
          }}
        />

この修正により、特殊キーコードが検出された場合でも、onKeyDownイベントがトリガーされ、適切な処理が実行されるようになります。

yosi2024/07/24 9:05

上記の回答は見当違い

yosi2024/07/24 9:09

ハックな修正方法だが、フォーカス時に一度値を書き換えることでonChangeが発火するようになる。
あまり参考にならないかもしれないが。

        <Input
          size="sm"
          type="number"
          defaultValue={params.maxWidth}
          onFocus={(e) => {
            // ページ読み込み後に値を消すとonChangeが読み込まれない問題のパッチ
            e.target.value = params.maxWidth ? `${params.maxWidth}` : ""
          }}
          onChange={(e) => {
            console.log("onChange")
          }}
        />

yosi2024/07/24 9:34

原因わかった。

サーバーサイドでHTMLを生成する。この時、defaultValueは空になっていた
↓
フロントエンドで再度HTMLが生成される。この時、defaultValueはparams.maxWidthの値になっていた

defaultValueが書き換わったことで挙動がおかしくなっていた

コメントするにはログインが必要です

yosi