[英]Pass values from child component (form) into parent component (where submit button located)
I have split big component into two, where currently one is child and another is parent.我已将大组件分成两部分,其中一个是子组件,另一个是父组件。 However currently after clicking Submit button on parent component values are somehow getting null and no data is passed into database.
然而,目前在父组件值上单击提交按钮后,以某种方式获取 null 并且没有数据传递到数据库中。 Why so and how to fix that?
为什么会这样以及如何解决这个问题?
In Record.razor.cs在记录中。razor.cs
[Parameter]
public string Title { get; set; }
[Parameter]
public string Description { get; set; }
[Parameter]
public DateTime SelectedDate { get; set; }
Record.razor:记录.razor:
<Form Model="this" LabelColSpan="8" WrapperColSpan="16">
<FormItem Label="Record title" NoStyle>
<Input @bind-Value="@this.Title" />
</FormItem>
<FormItem Label="Description" NoStyle>
<Input @bind-Value="@this.Description" />
</FormItem>
<FormItem Label="Date" NoStyle>
<DatePicker @bind-Value="@this.SelectedDate" ShowTime="@true" OnChange="this.OnDateSelected" />
</FormItem>
</Form>
Index.razor.cs:索引.razor.cs:
private DiaryRecord DiaryRecordModel { get; set; }
private bool isDialogVisible;
private DateTime SelectedDate { get; set; }
public Index()
{
this.DiaryRecordModel = new DiaryRecord();
this.SelectedDate = DateTime.Now;
}
Index.razor:索引.razor:
<Form Model="this.DiaryRecordModel"
OnFinish="(e) => this.OnCreateNewDiaryRecord()">
<FormItem>
<Record Description="@context.Description"
SelectedDate="this.SelectedDate"
Title="@context.Title" />
</FormItem>
<FormItem WrapperColOffset="8" WrapperColSpan="16">
<Button Type="@ButtonType.Primary" HtmlType="submit">
Submit
</Button>
<Button OnClick="(e)=>{this.isDialogVisible = false;}">Cancel</Button>
</FormItem>
</Form>
DiaryRecord.cs日记记录.cs
public class DiaryRecord
{
public Guid Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
For example todays date is always passed into model, instead of actually selected date (other values are not taken into model):例如,今天的日期总是传递给 model,而不是实际选择的日期(其他值未纳入模型):
First of all - don't use form inside a form.首先 - 不要在表单中使用表单。 Use just the one on Index.razor.
仅使用 Index.razor 上的那个。
Second: Once you do this: Description="@context.Description"
your context looses the connection to whatever is happening with the string.第二:一旦你这样做:
Description="@context.Description"
你的上下文就会失去与字符串发生的任何事情的连接。
You have two options here.您在这里有两个选择。
1] Use two-way binding , which will result in @bind-Description="@context.Description"
, you also need to create EventCaller
for every property inside Record
component. 1]使用双向绑定,这将导致
@bind-Description="@context.Description"
,您还需要为Record
组件中的每个属性创建EventCaller
。
2] (better one) Send your whole model to Record
component: 2](更好的一个)将您的整个 model 发送到
Record
组件:
[Parameter] DiaryRecord DiaryRecord {get;set;}
<Input @bind-Value="@DiaryRecord.Title" />
<Record DiaryRecord=this.DiaryRecordModel/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.