Reinis Mazeiks
6c323e9fc5
* Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book
61 lines
1.4 KiB
Rust
61 lines
1.4 KiB
Rust
#![allow(non_snake_case)]
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::desktop::launch(App);
|
|
}
|
|
|
|
#[derive(PartialEq, Clone)]
|
|
struct Comment {
|
|
content: String,
|
|
id: usize,
|
|
}
|
|
|
|
pub fn App(cx: Scope) -> Element {
|
|
// ANCHOR: render_list
|
|
let comment_field = use_state(&cx, || String::new());
|
|
let mut next_id = use_state(&cx, || 0);
|
|
let comments = use_ref(&cx, || Vec::<Comment>::new());
|
|
|
|
let comments_lock = comments.read();
|
|
let comments_rendered = comments_lock.iter().map(|comment| {
|
|
cx.render(rsx!(CommentComponent {
|
|
key: "{comment.id}",
|
|
comment: comment.clone(),
|
|
}))
|
|
});
|
|
|
|
cx.render(rsx!(
|
|
form {
|
|
onsubmit: move |_| {
|
|
comments.write().push(Comment {
|
|
content: comment_field.get().clone(),
|
|
id: *next_id.get(),
|
|
});
|
|
next_id += 1;
|
|
|
|
comment_field.set(String::new());
|
|
},
|
|
input {
|
|
value: "{comment_field}",
|
|
oninput: |event| comment_field.set(event.value.clone()),
|
|
}
|
|
input {
|
|
r#type: "submit",
|
|
}
|
|
},
|
|
comments_rendered,
|
|
))
|
|
// ANCHOR_END: render_list
|
|
}
|
|
|
|
#[inline_props]
|
|
fn CommentComponent(cx: Scope, comment: Comment) -> Element {
|
|
cx.render(rsx!(div {
|
|
"Comment by anon:",
|
|
p { "{comment.content}" }
|
|
button { "Reply" },
|
|
}))
|
|
}
|