How to use these components if event handlers are not implemented?

[kingsleyh]

Hi

Could someone put an example of how to use these components with events? e.g.

 <MatTextField label="Search" value={(*search_query).clone()} >

As the user types I want to take the value from the text input and write into an H1 element below the text field

with a regular input field I would do like this - could someone put an example using this MatTextField componet?

 let search_query = use_state(String::new);

 let oninput = {
        let sq = search_query.clone();
        Callback::from(move |e: InputEvent| {
            let input: HtmlInputElement = e.target_unchecked_into();
            sq.set(input.value());
        })
    };

 yew::html! {
 <div>
   <input type="text" value={(*search_query).clone()} placeholder="Search" {oninput}/>
<h1>{ &*search_query }</h1>
</div>
 }

Any help appreciated

[ranile]

Duplicate of #10.

Unfortunately, there's no good solution to this -- the best you could really do is wrap the component in a <span>

[kingsleyh]

It did not work to wrap in a span for the onInput event unfortunately - the component didn't get all the value just the last few characters typed

[ranile]

Oh sorry, I didn't see the oninput event. You can use the oninput prop: https://docs.rs/material-yew/latest/material_yew/text_inputs/struct.TextFieldProps.html#structfield.oninput