バージョン: 0.21

コールバック

コールバックは Yew 内のサービス、エージェント、および親コンポーネントと通信するために使用されます。内部的には、その型は Fn であり、Rc でラップされており、それらを複製できるようにします。

送信される引数を持つ emit 関数があり、その <IN> 型を宛先に予期されるメッセージに変換します。親からのコールバックが props で子コンポーネントに提供される場合、その子は update ライフサイクルフック内でコールバックで emit を呼び出してメッセージを親に送信できます。html! マクロ内で props として提供されたクロージャーまたは関数は自動的にコールバックに変換されます。

コールバックの簡単な使用例

use yew::{html, Component, Context, Html};

enum Msg {
    Clicked,
}

struct Comp;

impl Component for Comp {

    type Message = Msg;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let onclick = ctx.link().callback(|_| Msg::Clicked);
        html! {
            <button {onclick}>{ "Click" }</button>
        }
    }
}

callback に渡される関数は、必ずパラメーターを取る必要があります。たとえば、onclick ハンドラーには、MouseEvent タイプのパラメーターを取る関数が必要です。次に、ハンドラーはコンポーネントに送信するメッセージの種類を決定できます。このメッセージは、更新ループの次のために無条件でスケジュールされます。

更新を引き起こさない可能性のあるコールバックが必要な場合は、batch_callback を使用します。

use yew::{events::KeyboardEvent, html, Component, Context, Html};

enum Msg {
    Submit,
}

struct Comp;

impl Component for Comp {

    type Message = Msg;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let onkeypress = ctx.link().batch_callback(|event: KeyboardEvent| {
            if event.key() == "Enter" {
                Some(Msg::Submit)
            } else {
                None
            }
        });

        html! {
            <input type="text" {onkeypress} />
        }
    }
}

コールバック​

関連例​

コールバック

関連例