呼叫回函

呼叫回函

呼叫回函用在 Yew 中與服務、代理及父元件進行溝通。它們在結構上是封裝在 Rc 中的 Fn，使其可以被複製。

它們有一個 emit 函式，將其 <IN> 類型視為參數，並將其轉換成目的地所需的訊息。如果屬性中由父元件提供的呼叫回函提供給子元件，該子元件可以在其 update 生命週期鉤子中呼叫該呼叫回函上的 emit，以便將訊息傳送回其父元件。作為 html! 巨集中屬性提供的封閉區域或函式會自動轉換成呼叫回函。

呼叫回函的一個簡單使用範例如下所示

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} />
        }
    }
}

相關範例

• 計數器
• 計時器