VegaのパスワードフィールドでonSubmitEditingイベントを処理する方法
VegaのパスワードフィールドでonSubmitEditingイベントを処理する方法
この記事では、パスワード用のTextInputコンポーネントに送信アクションのフィルタリングを追加して、予期しないエラーを防ぐ方法を紹介します。onSubmitEditing()コールバックは、パスワードの表示と非表示の切り替えなど、複数のキーボードアクションに応じて呼び出されます。どのアクションからコールバックがトリガーされたかを確認しないと、ユーザーがパスワードの表示状態を切り替えただけでビジネスロジック（ネットワークへの接続など）が実行されることがあります。
前提条件
アプリに修正が必要かどうかの判断
次の両方に当てはまる場合、この修正をアプリに実装する必要があります。
keyboardTypeがpasswordに設定されたTextInputを使用していて、キーボードUIにパスワードの表示／非表示を切り替えるボタンがある。e.nativeEvent.submitActionの値をチェックせずにonSubmitEditing()を処理している。
たとえば、次のコードでは、パスワードの表示と非表示の切り替えを含むすべての送信アクションに対してパスワードハンドラーがトリガーされます。
<TextInput
placeholder='パスワードのプレースホルダーテキスト'
keyboardType='password'
returnKeyType='done'
onSubmitEditing={(e) => {
console.log("パスワード - " + e.nativeEvent.text);
}}
/>
submitActionのチェックの追加
ビジネスロジックを実行する前に、onSubmitEditing()コールバックでe.nativeEvent.submitActionをチェックしてフィルタリングを行います。これにより、意図したアクション（「done」など）でのみコードがトリガーされます。
<TextInput
placeholder='パスワードのプレースホルダーテキスト'
keyboardType='password'
returnKeyType='done'
onSubmitEditing={(e) => {
if(e.nativeEvent.submitAction === 'done') {
console.log("パスワード - " + e.nativeEvent.text);
}
}}
/>
その他のsubmitAction値の処理
「done」以外の送信アクションに応答することもできます。submitActionの値は、returnKeyTypeの値と、auxOptionsを使用して設定されたカスタムの値に対応します。次の例は、doneアクションの処理に加えて、パスワードの表示切り替えを処理する方法を示しています。
<TextInput
placeholder='パスワードのプレースホルダーテキスト'
keyboardType='password'
returnKeyType='done'
onSubmitEditing={(e) => {
if(e.nativeEvent.submitAction === 'done') {
console.log("パスワード - " + e.nativeEvent.text);
} else if (e.nativeEvent.submitAction === 'show_password') {
console.log("パスワードが表示されました");
} else if(e.nativeEvent.submitAction === 'hide_password') {
console.log("パスワードが非表示になりました");
}
}}
/>
このほかにsubmitActionが取り得る値には、「go」、「search」、「next」、「previous」があります。
関連コンテンツ
Last updated: 2026年4月15日
