Following is simple code
@page "/demo"
<h3>POCBlazor</h3>
Input 1 :<input type="text" value="@somedata" @onchange="changeValue" placeholder="text 1" />
Input 2 :<input type="text" placeholder="text 2" />
@code {
public string somedata { get; set; }
void changeValue(ChangeEventArgs eventArgs)
{
somedata = eventArgs.Value.ToString();
somedata = somedata + "asdf";
StateHasChanged();
}
}
Scenario
1) I add new value in input 1 then it represent with "asdf"
e.g:
enter value "123" -- changeValue function called
--> Input 1 = "123asdf"
2) Second time I update input 1 with same value then the change event fired and code works but value is not updating in input 1
second time: again enter value "123" --- changeValue function called --> Input 1 = "123"
I am not sure what is the issue, and this should be investigated. I'll do it when I can spare the time. You are right about what you experience. However, if you use the @bind directive the desired behavior is attained. Do this and verify....
Input 1 :<input type="text" @bind="@Somedata" placeholder="text 1" />
Input 2 :<input type="text" placeholder="text 2" />
<p>@somedata</p>
@code {
private string somedata;
public string Somedata
{
get {return somedata; }
set{
if( somedata != value)
{
somedata = value + "asdf";
}
}
}
}
I guess I know what is the issue...
<h3>POCBlazor</h3>
Input 1 :<input type="text" value="@Somedata" @onchange="changeValue">
placeholder="text 1" />
Input 2 :<input type="text" placeholder="text 2" />
<p>@Somedata</p>
@code {
public string Somedata { get; set; }
void changeValue(ChangeEventArgs eventArgs)
{
Somedata = eventArgs.Value.ToString();
Somedata += "asdf";
}
}
}
When you enter the value 123 into the text box, the onchnage event is invoked, and as a result the eventhandler is executed . and thus the Somedata property contains the value 123asdf. Since the change event is a UI event, the StateHasChanged is automatically called, and it notifies the component that its value has changed and it should re-render. The component re-renders, and now the text box, as said above, contains the value 123asdf.
When you enter the value 123, once again, the processing cycle repeats itself, but, look at your code:
somedata = eventArgs.Value.ToString();
The value 123 is assigned to somedata Now somedata === 123, right ?
somedata = somedata + "asdf";
Add the string "asdf" to the value of somedata and assigned the combined value to somedata. Now somedata contains the value '123asdf". This is the same value as before, right ? This means that your component is not going to be re-render as the state of the component does not changed. Note: The StateHasChanged method is only a sort of notifier for the component that its state has changed, but the component is to decide whether to re-render or not, so even if you use it in your code, the component refuse to budge. Incidentally, the presence of the StateHasChanged method is not necessary because it is automatically called with UI events.
The next time you enter 123 and tab out, the change event is not triggered at all. But if you NEXT enter the value 1234, both property and text box will have the combined value: 1234asdf
This behavior is by design...