Component with Form - Yew Typing CST Test

Component with Form — Yew Code

Simple form input handling in Yew.

# yew/demo/form.rs
use yew::prelude::*;

struct Model {
	name: String,
	message: String,
}

enum Msg {
	Update(String),
	Submit,
}

impl Component for Model {
	type Message = Msg;
	type Properties = ();

	fn create(ctx: &Context<Self>) -> Self {
		Model { name: "".into(), message: "".into() }
	}

	fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
		match msg {
		Msg::Update(val) => { self.name = val; true },
		Msg::Submit => { self.message = format!("Hello, {}!", self.name); true },
		}
	}

	fn view(&self, ctx: &Context<Self>) -> Html {
		html! {
		<div>
		<input value={self.name.clone()} oninput={ctx.link().callback(|e: InputEvent| Msg::Update(e.data().unwrap_or_default()))} />
		<button onclick={ctx.link().callback(|_| Msg::Submit)}>{"Submit"}</button>
		<p>{ &self.message }</p>
		</div>
		}
	}
}

fn main() {
	yew::start_app::<Model>();
}

Yew Language Guide

Yew is a modern Rust framework for building client-side web applications using WebAssembly (Wasm), providing a reactive component-based architecture similar to React.

More Yew Typing Exercises

Practice Other Languages