Callbacks

Callbacks

Callbacks are used to communicate with services, agents, and parent components within Yew. Internally their type is just Fn wrapped in Rc to allow them to be cloned.

They have an emit function that takes their <IN> type as an argument and converts that to a message expected by its destination. If a callback from a parent is provided in props to a child component, the child can call emit on the callback in its update lifecycle hook to send a message back to its parent. Closures or Functions provided as props inside the html! macro are automatically converted to Callbacks.

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

  1. use yew::{html, Component, Context, Html};
  3. enum Msg {
  4.     Clicked,
  5. }
  7. struct Comp;
  9. impl Component for Comp {
  11.     type Message = Msg;
  12.     type Properties = ();
  14.     fn create(_ctx: &Context<Self>) -> Self {
  15.         Self
  16.     }
  18.     fn view(&self, ctx: &Context<Self>) -> Html {
  19.         let onclick = ctx.link().callback(|_| Msg::Clicked);
  20.         html! {
  21.             <button {onclick}>{ "Click" }</button>
  22.         }
  23.     }
  24. }

The function passed to callback must always take a parameter. For example, the onclick handler requires a function which 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.

  1. use yew::{events::KeyboardEvent, html, Component, Context, Html};
  3. enum Msg {
  4.     Submit,
  5. }
  7. struct Comp;
  9. impl Component for Comp {
  11.     type Message = Msg;
  12.     type Properties = ();
  14.     fn create(_ctx: &Context<Self>) -> Self {
  15.         Self
  16.     }
  18.     fn view(&self, ctx: &Context<Self>) -> Html {
  19.         let onkeypress = ctx.link().batch_callback(|event: KeyboardEvent| {
  20.             if event.key() == "Enter" {
  21.                 Some(Msg::Submit)
  22.             } else {
  23.                 None
  24.             }
  25.         });
  27.         html! {
  28.             <input type="text" {onkeypress} />
  29.         }
  30.     }
  31. }

Relevant examples