onKeyPress Enterを押すと重複入力がブロックされます

5342 ワード
JavaScript テキストリンク

🤬 todolistが入力でenterを押したときに問題が発生しました



todolistでは、inputにvalueがない場合、TodoViewModel.addTodo関数にalretが表示されます.
しかし、テキストを入力した後、Enterを押し続けた結果、次のような操作が行われました.
  • 既存の入力テキストが正常に追加されます.
  • を追加すると、inputのvalueがnullになります.
  • 企業が押している場合、inputElementは入力を継続し、onkeypressイベントを実行します.

    • 🧐 私が欲しいのは、Enterを押しても一度だけ運転してほしいことです...なぜずっと動いているのですか?


    JavaScriptのキーボードイベントは3種類あります.
    onKeyUp:キーがオフの場合
    onKeyDown:keyの場合
    onKeyPress:keyが押されている場合は、現在は推奨されていません.
         <input
          type="text"
          value={TodoViewModel.createInputValue}
          onChange={(e) => TodoViewModel.handleCreateInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && TodoViewModel.addTodo()}
          autoFocus
        />
    まず今はお勧めしないので、keyDownイベントに変更します.
    しかし、問題はまだ解決されていません.
    したがって、最初にステータス値が生成され、booleanの値でsubmitであるか否かが判断され、イベントの再実行が阻止される.
    ただしMVVMモードを適用して作成されたtodolsitなので、viewに変数を作成して論理を処理したり、viewモデルに論理を追加して重複入力を阻止したりするのは効率的ではありません.

    解決策


    blurイベントは1回のtodoがsubmitであり、入力焦点を外に除去することによって解決される.
    .blur()は、すべての要素ではなくHTML要素にのみ存在することを保証するため、targetをHTML InputElementとして指定する必要があります.
      <input
          type="text"
          value={TodoViewModel.createInputValue}
          onChange={(e) => TodoViewModel.handleCreateInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              (e.target as HTMLInputElement).blur();
              TodoViewModel.addTodo();
            }
          }}
          autoFocus
        />
    qt QAction Class
    [プログラマーlv 2]アーチェリー大会