Function leptos::create_node_ref

source ·
pub fn create_node_ref<T>(cx: Scope) -> NodeRef<T>where
    T: ElementDescriptor + 'static,
Expand description

Creates a shared reference to a DOM node created while using the view macro to create your UI.


use leptos::html::Input;

#[component]
pub fn MyComponent(cx: Scope) -> impl IntoView {
    let input_ref = create_node_ref::<Input>(cx);

    let on_click = move |_| {
        let node =
            input_ref.get().expect("input_ref should be loaded by now");
        // `node` is strongly typed
        // it is dereferenced to an `HtmlInputElement` automatically
        log!("value is {:?}", node.value())
    };

    view! {
      cx,
      <div>
      // `node_ref` loads the input
      <input _ref=input_ref type="text"/>
      // the button consumes it
      <button on:click=on_click>"Click me"</button>
      </div>
    }
}