イベントハンドリング

Qwik フレームワークにおけるイベントハンドリングについて、具体的な例を用いて学びます。ここでは、ユーザー入力を扱うフォームコンポーネントを例に、イベントを捕捉し、それに応じてアクションを実行する方法を説明します。

フォーム入力とイベントハンドリング

目的

フォームを通じてユーザー入力を受け取り、その入力を処理することで、Qwik におけるイベントハンドリングの基本を理解します。具体的には、ユーザーがフォームに入力したテキストを受け取り、ボタンクリック時にその入力値を表示するシンプルなアプリケーションを作成します。

実装ステップ

  1. フォームコンポーネントの作成:
    • ユーザーからのテキスト入力を受け付けるテキストフィールドと、その入力を送信するボタンを持つフォームコンポーネントを定義します。
  2. イベントハンドラの設定:
    • テキストフィールドの入力変更を監視し、ボタンクリックを捕捉するイベントハンドラを設定します。
  3. 入力値の処理:
    • ユーザーの入力値を状態として保持し、ボタンクリック時にその値を表示します。

コード例

// src/components/FormComponent.tsx
import { component$, useStore } from '@builder.io/qwik';

export const FormComponent = component$(() => {
  const state = useStore({
    userInput: '',
    submittedText: '',
  });

  return (
    <div>
      <form
        onSubmit$={(event) => {
          event.preventDefault(); // フォームのデフォルト送信を防ぐ
          state.submittedText = state.userInput; // 入力値を保存
        }}
      >
        <input
          type='text'
          onInput$={(event) => (state.userInput = event.target.value)}
          value={state.userInput}
        />
        <button type='submit'>Submit</button>
      </form>
      <p>Submitted Text: {state.submittedText}</p>
    </div>
  );
});