回调（Callbacks）

Callbacks

Callbacks 用于与 Yew 中的 services，agents 和父组件进行通信。它们仅仅是个 Fn，并由 Rc 包裹以允许被克隆。

它们有一个 emit 函数，该函数将它的 <IN> 类型作为参数并将其转换为目标所期望的消息。如果一个回调从父组件中通过 props 提供给子组件，则子组件可以在其 update 生命周期钩子中对该回调调用 emit，以将消息发送回父组件。在 html! 宏内被提供作为 props 的闭包或函数会自动转换为 Callbacks。

A simple use of a callback might look something like this:

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

The function passed to callback must always take a parameter. For example, the onclick handler requires a function that takes a parameter of type MouseEvent. The handler can then decide what kind of message should be sent to the component. This message is scheduled for the next update loop unconditionally.

If you need a callback that might not need to cause an update, use 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} />
        }
    }
}

Relevant examples

• Counter
• Timer