dioxus/examples/inputs.rs

137 lines
4 KiB
Rust
Raw Normal View History

//! This example roughly shows how events are serialized into Rust from JavaScript.
//!
//! There is some conversion happening when input types are checkbox/radio/select/textarea etc.
2022-11-16 00:05:22 +00:00
use dioxus::prelude::*;
fn main() {
dioxus_desktop::launch(app);
}
const FIELDS: &[(&str, &str)] = &[
("button", "Click me!"),
("checkbox", "CHECKBOX"),
("color", ""),
("date", ""),
("datetime-local", ""),
("email", ""),
("file", ""),
("image", ""),
("number", ""),
("password", ""),
("radio", ""),
("range", ""),
("reset", ""),
("search", ""),
("submit", ""),
("tel", ""),
("text", ""),
("time", ""),
("url", ""),
// less supported things
("hidden", ""),
("month", ""), // degrades to text most of the time, but works properly as "value'"
("week", ""), // degrades to text most of the time
];
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div { margin_left: "30px",
div {
// handling inputs on divs will catch all input events below
// so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe)
// be mindful in grouping inputs together, as they will all be handled by the same event handler
oninput: move |evt| {
2023-01-28 02:35:46 +00:00
println!("{evt:?}");
},
div {
input {
id: "huey",
r#type: "radio",
value: "huey",
checked: "",
name: "drone",
}
label {
r#for: "huey",
"Huey"
}
}
div {
input {
id: "dewey",
r#type: "radio",
value: "dewey",
name: "drone",
}
label {
r#for: "dewey",
"Dewey"
}
}
div {
input {
id: "louie",
value: "louie",
r#type: "radio",
name: "drone",
}
label {
r#for: "louie",
"Louie"
}
}
div {
input {
id: "groovy",
value: "groovy",
r#type: "checkbox",
name: "drone",
}
label {
r#for: "groovy",
"groovy"
}
}
}
// elements with driven values will preventdefault automatically.
// you can disable this override with preventdefault: false
div {
input {
id: "pdf",
value: "pdf",
name: "pdf",
r#type: "checkbox",
oninput: move |evt| {
2023-01-28 02:35:46 +00:00
println!("{evt:?}");
},
}
label {
r#for: "pdf",
"pdf"
}
}
2022-11-18 04:00:39 +00:00
FIELDS.iter().map(|(field, value)| rsx! {
div {
input {
id: "{field}",
name: "{field}",
r#type: "{field}",
value: "{value}",
2022-01-05 22:30:12 +00:00
oninput: move |evt: FormEvent| {
2023-01-28 02:35:46 +00:00
println!("{evt:?}");
},
}
label {
r#for: "{field}",
"{field} element"
}
br {}
}
2022-11-18 04:00:39 +00:00
})
}
})
}