2022-08-27

How to pass argument to onclick callback - yew function component

How do I correctly pass an argument to an onclick event handler in a yew function component?

What I have:

#[function_component(Calculator)]
pub fn calulator() -> Html {
    let navigator = use_navigator().unwrap();
    let handle_formula_click = Callback::from(move |_| {
        navigator.push(&AppRoute::Formula { id })
    });

    html! {
            <div>
                ...
                <button onclick={handle_formula_click}>
                    ...
                </button>
                ...
            </div>
    }
}

I would like to pass in a string to the handle_formula_click callback

What I want:

#[function_component(Calculator)]
pub fn calulator() -> Html {
    let navigator = use_navigator().unwrap();
    let handle_formula_click = Callback::from(move |id: String| {
        navigator.push(&AppRoute::Formula { id })
    });

    html! {
            <div>
                ...
                <button onclick={handle_formula_click("fixed1"}>
                    ...
                </button>
                ...
            </div>
    }
}


No comments:

Post a Comment