Question

由于blazor不支持停止evet传播，因此我需要对type =“ date”和onchange事件的输入进行单向绑定。像这样：

<input type="date" value="@_endDate" format-value="yyyy-MM-dd" onchange="@EndDate_change"/>

但这不起作用。页面包含datePicker但没有值。

“ _ endDate”的类型为DateTime。

如果我使用双向绑定，那么一切正常。

<input type="date" bind="@_endDate" format-value="yyyy-MM-dd"/>

有人知道为什么第一个“输入”不起作用吗？是否有任何错误或这是blazor中的错误？对于纯文本，具有onchange事件的单向绑定可以正常工作。

编辑1： _endDate包含当前日期，并设置为DateTime.Now

protected void EndDate_change(UIChangeEventArgs endDateEvent)
{
    _endDate = Convert.ToDateTime(endDateEvent.Value);
    StateHasChanged();
}

Answer 1

由于炽烈的@ bind-Value和@onchange不能共存，因为目前这是最好的解决方法

<InputDate type="date" @bind-Value="@_endDate"/>
@code {
 private DateTime endDate;
public DateTime _endDate
{
    get { return endDate; }
    set
    {
        endDate = value;
        //Do Other tasks ......
        // Eg updateSomething();
    }
}
}

Answer 2

要同时保留 @onchange= 和单向 value= 使用此

value="@someDate.ToString("yyyy-MM-dd")"

诀窍是将格式设置为字符串 yyyy-MM-dd 以从值中获取单向绑定。格式不同或仅使用 DateTime 对象无法在日期选择器中显示日期。

示例：

<input type="date" value="@knowledge.ActualShortTermDate.ToString("yyyy-MM-dd")" @onchange="@(async (e) => await updateDate(DateTime.Parse(e.Value.ToString())))" />

Answer 3

这应该有效...该错误可能在您的代码中。如果您认为自己的代码很好，请在github中发布问题。

不需要在EndDate_change方法中调用StateHasChanged，因为它是自动调用的。

不确定为什么不能使用bind属性...但是，您可以在form组件内使用InputDate组件，以停止事件传播（提交）。

希望这对您有帮助...

Answer 4

自.NET Core 3.1 Preview 2以来，Blazor应用程序均支持防止事件的默认操作和Stop事件的传播，请检查此链接 here

Answer 5

尝试使用@ bind-Value而不是@bind，它对我有用

        <div class="col-4 border border-primary border-0 text-left">
            <InputDate id="expenseedate" class="form-control form-control-sm col-4" format-value="yyyy-MM-dd" @bind-Value="@_endDate" @oninput="@ResetError" placeholder="Enter Expense end Date"></InputDate>
        </div>

Blazor将值绑定到“输入日期”的一种方式

5 个答案: