1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
use leptos::{
IntoView, component,
html::Input,
prelude::{ClassAttribute, ElementChild, Get, NodeRef, OnAttribute, Set, signal},
view,
web_sys::SubmitEvent,
};
use crate::components::{input_placeholder::InputPlaceholder, site_header::SiteHeader};
#[component]
pub fn Buy() -> impl IntoView {
let (product_barcode, set_product_barcode) = signal(String::new());
let input_element: NodeRef<Input> = NodeRef::new();
let on_submit = move |ev: SubmitEvent| {
// stop the page from reloading!
ev.prevent_default();
let value = input_element
.get()
// event handlers can only fire after the view
// is mounted to the DOM, so the `NodeRef` will be `Some`
.expect("<input> to exist")
.value();
set_product_barcode.set(value);
};
view! {
<SiteHeader logo=icondata_io::IoPricetag back_location="/" name="Buy" />
<form class="flex flex-col contents-start m-2 g-2" on:submit=on_submit>
<InputPlaceholder input_type="number" label="Product Barcode" node_ref=input_element />
<input type="submit" value="Submit" />
</form>
<p>"Name is: " {product_barcode}</p>
}
}
|
