如何在Yew框架中重置HTML表单输入字段

你在学习Yew框架的表单输入页面时，已经实现了提交表单添加食材的逻辑，但不知道如何在提交后重置表单输入字段——就像React里用event.target.reset()那样。

解决方案 #

Yew中可以直接调用HTML原生表单元素的reset()方法，你已经在回调里获取到了HtmlFormElement实例，只需要在处理完添加食材的逻辑后，调用这个实例的reset()方法即可。

修改后的代码示例 #

//... imports
// I have redacted some code. RecipeItemProps is a simple three string struct
#[derive(Properties, PartialEq)]
pub struct RecipeFormProps {
    pub ingredients: Vec<RecipeItemProps>,
}

#[function_component]
fn RecipeForm(props: &RecipeFormProps) -> Html {
    let app_state = use_state(|| Vec::from(props.ingredients.clone()));

    let add_ingridient_callback = {
        let app_state = app_state.clone();
        Callback::from(move |event: SubmitEvent| {
            let target: EventTarget = event.target().unwrap();
            let form = target.dyn_into::<HtmlFormElement>().ok();

            if let Some(form) = form {
                let form_data = FormData::new_with_form(&form).unwrap();
                let name: JsValue = form_data.get("ingridient");
                let amount: JsValue = form_data.get("amount");
                let quantity: JsValue = form_data.get("quantity");

                let mut myvec = app_state.to_vec();
                myvec.push(RecipeItemProps {
                    name: name.as_string().unwrap(),
                    amount: amount.as_string().unwrap(),
                    quantity: quantity.as_string().unwrap(),
                });
                app_state.set(myvec);

                // 调用reset方法重置表单
                form.reset();
            }
            event.prevent_default();
        })
    };
   // I generate html here
}

说明 #

HtmlFormElement是Yew对原生HTMLFormElement的绑定，它的reset()方法和原生JS里的行为完全一致，会将表单所有输入字段恢复到初始状态。只需在完成状态更新后，在if let Some(form) = form的代码块里添加form.reset()这一行即可。

内容的提问来源于stack exchange，提问作者vahvero