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:
Ryan Mwangi 2024-12-06 16:08:21 +03:00
parent 9afc89833a
commit de6559e5e4
1 changed files with 26 additions and 12 deletions

View File

@ -1,22 +1,36 @@
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>
} }