将值从子组件（表单）传递到父组件（提交按钮所在的位置）

Question

我已将大组件分成两部分，其中一个是子组件，另一个是父组件。然而，目前在父组件值上单击提交按钮后，以某种方式变为空，并且没有数据传递到数据库中。为什么会这样以及如何解决这个问题？

在 Record.razor.cs 中

[Parameter]
public string Title { get; set; }

[Parameter]
public string Description { get; set; }

[Parameter]
public DateTime SelectedDate { get; set; }

Record.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：

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：

  <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>

日记记录.cs

  public class DiaryRecord
  {
    public Guid Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
  }

例如，今天的日期总是传递给模型，而不是实际选择的日期（其他值不带入模型）：

Answer 1

首先 - 不要在表单中使用表单。只使用 Index.razor 上的那个。

第二： 一旦你这样做了：Description="@context.Description" 你的上下文会失去与字符串发生的任何事情的连接。

这里有两个选择。

1] 使用two-way binding，这将导致@bind-Description="@context.Description"，您还需要为Record组件内的每个属性创建EventCaller。

2]（更好的一个）将您的整个模型发送到Record组件：

[Parameter] DiaryRecord DiaryRecord {get;set;}

<Input @bind-Value="@DiaryRecord.Title" />

<Record DiaryRecord=this.DiaryRecordModel/>