Blazor 绑定输入值在按钮单击时不起作用

Question

我正在使用 Blazor 服务器端订阅时事通讯。当我按下订阅按钮时，我看到系统没有将 EmailAddress 绑定到用户输入的电子邮件地址。我错过了什么？

@inherits InstaTranscribeServerSide.Layouts.SubscribeToNewsletterComponent

<div class="container">
      <form class="mt-4">            
            <input type="email" name="email" placeholder="Enter your email address" text="@EmailAddress">
              <button type="button" @onclick="SubscribeToNewsletterClick">
              </button>
      </form>
</div>

public class SubscribeToNewsletterComponent : InstaTranscribeComponentBase
  {
    [Inject] protected ILogger<SubscribeToNewsletter> logger { get; set; }
    protected string EmailAddress { get; set; } = string.Empty;
    protected async Task SubscribeToNewsletterClick()
    {
      try
      {
        await this.EmailSender.AddUpdateContactAsync(EmailAddress);
        await JSRuntime.NotifySuccess($"You have been subscribed to our newsletter.");
      }
      catch (Exception exception)
      {
        await JSRuntime.NotifyError($"There was an error subscribing you to our newsletter.");
      }
    }
    protected override async Task OnInitializedAsync()
    {      
    }
}

显示电子邮件地址为空白的屏幕截图：

屏幕截图显示用户输入的电子邮件地址：

Answer 1

尝试使用@bind-value="EmailAddress" 这是双向数据绑定在 blazor 中的工作方式，您也可以将 value="@EmailAddress" 仅用于一种方式，您始终可以将输入作为参考并访问其属性

Answer 2

您的页面看起来有点“非 Blazor”。仅供参考，这是您页面的相当经典的 Blazor 版本。

它使用 Blazor EditForm 组件和页内状态显示。

@page "/"
<h3>Subscribe To My Site</h3>
<EditForm EditContext=this.editContext OnSubmit=this.SubmitForm>
    <div class="col">
        <InputText class="form-control" typeof="email" @bind-Value=this.model.Email placeholder="Enter your email address" />
    </div>
    <div class="col m-2 p-2 text-end">
    <button type="submit" class="btn btn-primary">Subscribe</button>
    </div>
</EditForm>
@if (this.isMessage)
{
    <div class="m-2">
        <div class="alert @this.alertCss">@this.message</div>
    </div>
}

@code {
    private NewsLetterCredentials model = new NewsLetterCredentials();

    private EditContext? editContext;

    private string message = string.Empty;
    private bool isMessage => !string.IsNullOrWhiteSpace(message);
    private string alertCss => this.success ? "alert-success" : "alert-danger";
    private bool success = true;

    protected override void OnInitialized()
        => this.editContext = new EditContext(model);

    private async Task SubmitForm()
    {
        await Task.Delay(200);
        // emulate save to database
        this.success = !this.success;
        this.message = this.success
            ? "Subscribed"
            : "Error Subscribing";

    }

    public class NewsLetterCredentials
    {
        public string Email { get; set; } = string.Empty;
    }
}