How to use bind-value and bind-value:event on a custom component Blazor

£可爱£侵袭症+ 提交于 2020-12-30 17:09:57

问题


In Blazor, while using inputs,

<input bind-value="@InputValue" bind-value:event="oninput"/>

This creates a 2 way binding that updates with the oninput event.

I would like to recreate this on a custom component with custom events and custom properties.

CustomInput.razor

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

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

   [Parameter]
   public EventCallback<ChangeEventArgs> OnInput { get; set; }
}

I want to be able to use it this way.

<CustomInput bind-Value="@InputValue" bind-Value:event="OnInput" />

Is this possible on Blazor right now? If yes, how do I achieve it?

EDIT:

For anyone that comes across this, it seems to work as is. I am not sure if the feature was added after the question was asked or if it always worked that way but the code above should work as is. Conventionally, your event name should be ValueChanged but if you have a reason to use another event name like in inputs where you have OnInput and OnChange, then you can use this format.


回答1:


The event parameter MUST be called ValueChanged

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

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

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

Read Data binding paragraph Component parameters



来源:https://stackoverflow.com/questions/58988952/how-to-use-bind-value-and-bind-valueevent-on-a-custom-component-blazor

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!