fix: resolve compilation issues in `ItemForm` component
- Updated signal declarations to use tuple destructuring for clarity and consistency. - Corrected event type in `handle_submit` to `SubmitEvent` and added `prevent_default` to prevent page reload on form submission. - Adjusted the `tags` signal to use `Vec<String>` for improved type safety. - Fixed signal updates post-submission to ensure values are reset properly. - Enhanced readability by explicitly referencing signal getters in `view!`. This ensures the `ItemForm` component compiles and functions as intended.
This commit is contained in:
parent
9afc89833a
commit
de6559e5e4
|
@ -1,23 +1,37 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
|
use leptos_dom::ev::SubmitEvent; // Import the correct event type
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<(String, String)>)>) -> impl IntoView {
|
pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<String>)>) -> impl IntoView {
|
||||||
let name = create_signal(String::new());
|
let (name, set_name) = create_signal(String::new());
|
||||||
let description = create_signal(String::new());
|
let (description, set_description) = create_signal(String::new());
|
||||||
let tags = create_signal(vec![]);
|
let (tags, set_tags) = create_signal(Vec::<String>::new());
|
||||||
|
|
||||||
let handle_submit = move |_| {
|
// Use SubmitEvent for the form submission handler
|
||||||
on_submit(name.get().clone(), description.get().clone(), tags.get().clone());
|
let handle_submit = move |ev: SubmitEvent| {
|
||||||
name.set(String::new());
|
ev.prevent_default(); // Prevent form submission from reloading the page
|
||||||
description.set(String::new());
|
on_submit(name.get(), description.get(), tags.get().clone());
|
||||||
tags.set(vec![]);
|
|
||||||
|
// Reset values after submission
|
||||||
|
set_name.update(|n| *n = String::new());
|
||||||
|
set_description.update(|d| *d = String::new());
|
||||||
|
set_tags.update(|t| t.clear());
|
||||||
};
|
};
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<form on:submit=handle_submit>
|
<form on:submit=handle_submit>
|
||||||
<input type="text" placeholder="Name" value=name.clone() on:input=move |e| name.set(event_target_value(&e)) />
|
<input
|
||||||
<textarea placeholder="Description" value=description.clone() on:input=move |e| description.set(event_target_value(&e)) />
|
type="text"
|
||||||
|
placeholder="Name"
|
||||||
|
value={name.get()}
|
||||||
|
on:input=move |e| set_name.set(event_target_value(&e))
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
placeholder="Description"
|
||||||
|
value={description.get()}
|
||||||
|
on:input=move |e| set_description.set(event_target_value(&e))
|
||||||
|
/>
|
||||||
<button type="submit">{ "Add Item" }</button>
|
<button type="submit">{ "Add Item" }</button>
|
||||||
</form>
|
</form>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue