Blazor 以单向方式将值绑定到“输入日期”答案

【问题标题】：Blazor binding value to "input date" in one-wayBlazor 以单向方式将值绑定到“输入日期”
【发布时间】：2019-09-11 17:51:54
【问题描述】：

由于 Blazor 不支持停止事件传播，我需要使用 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();
}

【问题讨论】：

如何设置_endDate，EndDate_change 有什么作用？如果你check the docs绑定就相当于在change事件中设置新值。如果你想显示它，你仍然必须将_endDate 设置为 something
请看Edit1。我将其添加到问题中。
我无法复制这个。日期显示（Chrome、Firefox、edge），但事件不是从日期输入触发的。最新的 Blazor，客户端。
您是否尝试从 javascript (datePicker) 更改日期值？那么，也许，你应该需要interop

标签： c# blazor

【解决方案1】：

要同时保留@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())))" />

【讨论】：

【解决方案2】：

由于在 blazor 中 @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();
    }
}
}

【讨论】：

在 setter 中调用异步方法可能会遇到麻烦。
到目前为止，您还没有运行 Task 方法。然后你得到错误的执行顺序

【解决方案3】：

自 .NET Core 3.1 Preview 2 起，Blazor 应用程序支持阻止事件的默认操作和停止事件传播，请查看此链接 here

【讨论】：

【解决方案4】：

尝试使用@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>

【讨论】：

使用 format-value="yyyy-MM-dd" 对我来说没有任何效果。