回调 (Callbacks)

回調函數用於在元件樹中向上傳遞訊息，以及在事件處理期間與其他元件（如代理或 DOM）進行通訊。在內部，回調函數的類型只是一個 Fn，並且被包裝在 Rc 中，以便它們可以被廉價地複製。

如果您想手動呼叫回調函數，可以使用 emit 函數。

use yew::{html, Component, Context, Html, Callback};

let cb: Callback<String, String> = Callback::from(move |name: String| {
    format!("Bye {}", name)
});

let result = cb.emit(String::from("Bob"));  // 呼叫回調函數
// web_sys::console::log_1(&result.into()); // 若取消註釋，將列印 "Bye Bob"

將回呼函數當作屬性傳遞

在 yew 中的一個常見模式是建立一個回呼函數，並將其作為屬性傳遞給子元件。

use yew::{function_component, html, Html, Properties, Callback};

#[derive(Properties, PartialEq)]
pub struct Props {
    pub on_name_entry: Callback<String>,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {

    props.on_name_entry.emit(String::from("Bob"));

    html! { "Hello" }
}

// 然後提供屬性 (Props)
#[function_component]
fn App() -> Html {
    let on_name_entry: Callback<String> = Callback::from(move |name: String| {
        let greeting = format!("Hey, {}!", name);
        // web_sys::console::log_1(&greeting.into()); // 如果取消註釋，這裡會列印文本
    });

    html! { <HelloWorld {on_name_entry} /> }
}

DOM 事件和回呼函數

回調函數也用於連接到 DOM 事件。

例如，這裡我們定義了一個回呼函數，當使用者點擊按鈕時將會呼叫：

use yew::{function_component, html, Html, Properties, Callback};

#[function_component]
fn App() -> Html {
    let onclick = Callback::from(move |_| {
        let greeting = String::from("Hi there");
        // web_sys::console::log_1(&greeting.into()); // 如果取消註釋，這裡會列印文本
    });

    html! {
        <button {onclick}>{ "Click" }</button>
    }
}