在Blazor中完成绑定后如何运行其他操作?

时间:2020-05-09 13:04:03

标签: blazor webassembly blazor-client-side

我试图弄清楚绑定完成后如何执行动作

例如

<input type="text" @bind="@Model.Value" />

<h2>@Value2</h2>

@code
{

void SetNewValue()
{
    Value2 = $"New value {this.Model.Value} added on {DateTime.Now}";
}

string Value2 {get;set;}

}

这只是一个简单的例子。我不能使用onchange,因为它不能与bind一起使用。我尝试使用onkeyup,但是在绑定完成之前执行了该操作。 Blazor无法处理失去的焦点,所以我真的不知道该如何完成。

2 个答案:

答案 0 :(得分:2)

 @page "/"

<input type="text" value="@model.Value" @onchange="@((args) => { model.Value = 
 args.Value.ToString(); SetNewValue(); })" />

<h2>@Value2</h2>

@code
{

private Model model = new Model();

void SetNewValue()
{
    Value2 = $"New value {this.model.Value} added on {DateTime.Now}";
}

string Value2 { get; set; }



public class Model
{
    public string Value { get; set; }
}

}

答案 1 :(得分:1)

我尝试过onchange,但是在失去焦点后会触发。如果要在换字母时调用函数,可以使用oninput。

<input @oninput="OnValueChanged" value="@Value" />

Value: <div>@Value</div>

@code {
    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();

        return ValueChanged.InvokeAsync(Value);
    }
}