Blazor WASM 中的 @bind-Value

Question

我正在尝试在 Blazor 中使用嵌套双向绑定，但遇到了一个问题，我需要将 InputText 值绑定到对象的 prop。 我有一个模型传递给自定义表单组件，然后根据道具类型传递给单个自定义输入文本：

索引页

<div class="d-flex flex-column gap-3">
    <FormSection Forecast=@forecast />
    <button class="btn btn-sm btn-success" @onclick=SaveData>Save data</button>
</div>

表单组件

<div>
    <label for="datetime" class="form-label">Date</label>
    <InputDateCustom TextValue="@Forecast.Date" />
</div>
<div>
    <label for="temperature" class="form-label">Temperature</label>
    <InputNumberCustom TextValue="@Forecast.TemperatureC" />
</div>
<div>
    <label for="summary" class="form-label">Summary</label>
    <InputTextCustom TextValue="@Forecast.Summary" />
</div>

@code {
    [Parameter] public WeatherForecast Forecast { get; set; }
}

输入日期

<input class="form-control form-control-sm" type="date" @bind-value=TextValue />

@code {
    [Parameter] public DateTime TextValue { get; set; } = DateTime.Now;
}

输入文字

<input class="form-control form-control-sm" type="text" @bind-value=TextValue />

@code {
    [Parameter] public string TextValue { get; set; } = string.Empty;
}

输入号码

<input class="form-control form-control-sm" type="number" @bind-value=TextValue />

@code {
    [Parameter] public int TextValue { get; set; } = 0;
}

使用这种结构，当我使用索引页面中的按钮保存数据时，模型中没有数据。 如果在输入组件内传递值时在表单组件中使用 @bind-Value（@bind-Value=Forecast.Date 而不是 TextValue="@Forecast.Date"），则会收到错误：Object of type “TestProject.Client.Components.InputTextCustom”没有与名称“TextValueChanged”匹配的属性

相反，直接在表单组件中使用输入组件，它可以工作，并且我可以看到模型中的值。

我做错了什么？使用嵌套组件双向绑定的最佳方法是什么？

Answer 1

我认为你需要从InputBase继承