跳至主要内容
版本:0.21

回调

回调

回调用于在 Yew 中与服务、代理和父组件进行通信。在内部,它们的类型只是包装在 Rc 中的 Fn,以允许它们被克隆。

它们有一个 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} />
}
}
}

相关示例