アクション可能なコンポーネントのプロパティ

アクション可能なコンポーネントのプロパティ

アクション可能なコンポーネントは、タッチ、カーソル、キーボードのイベントから直接入力を受け取ることができます。このドキュメントでは、アクション可能なすべてのコンポーネントに共通のプロパティについて説明します。

アクション可能なコンポーネント

アクション可能なコンポーネントには以下があります。

プロパティ

すべてのアクション可能なコンポーネントには、次のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明
onFocus コマンドの配列 [] × × コンポーネントがフォーカスを受け取ったときに実行するコマンドです。
onBlur コマンドの配列 [] × × コンポーネントがフォーカスを失ったときに実行するコマンドです。
handleKeyDown キーボードハンドラーの配列 [] × × コンポーネントがキーの押下を受け付けたときに評価するキーボードハンドラーです。
handleKeyUp キーボードハンドラーの配列 [] × × コンポーネントがキーの解放を受け取ったときに評価するキーボードハンドラーです。

アクション可能なコンポーネントでは、event.sourceプロパティやevent.targetプロパティのcomponentの定義にプロパティが追加されることはありません。

onFocus

コンポーネントがフォーカスを受け取ったときに実行するコマンドです。

disabled状態がtrueに設定されているコンポーネントはフォーカスを取得できないため、onFocusイベントハンドラーは実行されません。フォーカスがあるコンポーネントのdisabled状態がtrueに設定された場合、そのコンポーネントはフォーカスを失い、onBlurイベントハンドラーが実行されます。

inheritParentStateプロパティがtrueに設定されているコンポーネントはフォーカスを取得できないため、onFocusイベントハンドラーは実行されません。

生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型（Pager、TouchWrapperなど） 
    "handler": "Focus",
    ...                     // コンポーネントのソースプロパティ  
  }
}

event.source.typeプロパティには、コンポーネントの名前（TouchWrapper、ScrollViewなど）が設定されます。event.sourceのプロパティの詳細については、イベントソースを参照してください。

onFocusイベントハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。

onBlur

コンポーネントがフォーカスを失ったときに実行するコマンドです。

disabled状態がtrueに設定されているコンポーネントはフォーカスを取得できません。既にフォーカスがあるコンポーネントのdisabled状態がtrueに変更された場合、そのコンポーネントはフォーカスを失い、onBlurイベントハンドラーが実行されます。

inheritParentStateプロパティがtrueに設定されているコンポーネントはフォーカスを取得できないため、onBlurイベントハンドラーは実行されません。

生成されるイベントの形式は次のとおりです。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型（Pager、TouchWrapperなど） 
    "handler": "Blur",
    ...                     // コンポーネントのソースプロパティ  
  }
}

event.source.typeプロパティには、コンポーネントの名前（TouchWrapper、ScrollViewなど）が設定されます。event.sourceのプロパティの詳細については、イベントソースを参照してください。

onBlurイベントハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。

handleKeyDown

ユーザーがキーボードのキーを押したとき、またはキーがオートリピートされたときに実行するキーボードイベントハンドラーの配列です。keyDownイベントは、文字の入力時だけでなく、可能な場合に毎回生成されます。たとえば、Shiftキーを押すとkeyDownイベントが生成されます。

生成されるイベントの形式は次のとおりです。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型（Pager、TouchWrapperなど）       
    "handler": "KeyDown",
    ...                     // コンポーネントのソースプロパティ  
  },
  "keyboard": {
    "altKey":   Boolean
    "code":     String,
    "ctrlKey":  Boolean,
    "key":      String,
    "metaKey":  Boolean,
    "repeat":   Boolean,
    "shiftKey": Boolean
  }
}

event.source.typeプロパティには、コンポーネントの名前（TouchWrapper、ScrollViewなど）が設定されます。event.sourceのプロパティの詳細については、イベントソースを参照してください。

keyboardプロパティの詳細については、キーボードイベントハンドラーを参照してください。

handleKeyDownイベントハンドラーは、コンポーネントのデータバインディングコンテキストで通常モードで実行されます。

handleKeyUp

キーボードのキーが解放されたときに実行するキーボードイベントハンドラーの配列です。keyUpイベントは、文字の入力時だけでなく、可能な場合に毎回生成されます。たとえば、キーボードのShiftキーが解放されるとkeyUpイベントが生成されます。

生成されるイベントの形式は次のとおりです。


"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型（Pager、TouchWrapperなど）  
    "handler": "KeyUp",
    ...                     // コンポーネントのソースプロパティ
  },
  "keyboard": {
    "altKey":   Boolean
    "code":     String,
    "ctrlKey":  Boolean,
    "key":      String,
    "metaKey":  Boolean,
    "repeat":   Boolean,
    "shiftKey": Boolean
  }
}

event.source.typeプロパティには、コンポーネントの名前（TouchWrapper、ScrollViewなど）が設定されます。event.sourceのプロパティの詳細については、イベントソースを参照してください。

keyboardプロパティの詳細については、キーボードイベントハンドラーを参照してください。

handleKeyUpイベントハンドラーは、コンポーネントのデータバインディングコンテキストで通常モードで実行されます。

アクション可能なコンポーネントイベントハンドラーの例

以下は、onFocusハンドラーとonBlurハンドラーの例を示しています。ドキュメントには、TouchWrapperコンポーネントのSequenceと2つのボタンが表示されます。各リスト項目は、onFocusとonBlurでコマンドを実行してバインド変数を更新し、フォーカスを取得または失ったコンポーネントを追跡します。ドキュメントのonMountでは、リストの最初の項目にフォーカスを設定します。

キーボード付きのデバイスで、TabキーとShift+Tabキーを使用してフォーカスを変更し、onFocusハンドラーとonBlurハンドラーの結果を確認してください。

このページは役に立ちましたか？

最終更新日: 2025 年 09 月 30 日