回调
回调
回调用于在 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} />
}
}
}