Blazor を使用して、ASP.NET Core を使用した最初の Web アプリをビルドします

Windows Linux macOS

コンポーネントを変更する

コンポーネント パラメーターは、属性または子コンテンツを使用して指定され、それは子コンポーネントのプロパティを設定できます。ボタンをクリックするたびにインクリメントする量を指定するためにCounter コンポーネントのパラメーターを定義します:

  • IncrementAmount のパブリック プロパティに、[Parameter] 属性を追加しました。
  • IncrementCount メソッドを変更して、currentCount の値を増加させるときに IncrementAmount を使います。

次のコードは、それを実現する方法を示しています。 強調表示された行は変更を示しています。

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

Home.razor で、<Counter> 要素を更新して、次のコードの強調表示された行に示すように、増分量を 10 に変更する IncrementAmount 属性を追加します。

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

[ホット リロード] ボタンをクリックして、アプリに変更を適用します。Home コンポーネントは、次の画像に示すように、[Click me] ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。

Home コンポーネントは、次の画像に示すように、[Click me] ボタンが選択されるたびに 10 ずつ増加する独自のカウンターを持つようになりました。/counter にある Counter コンポーネント (Counter.razor) で 1 ずつ増加し続けます。

ホームページには、10 ずつ増加し、40 個表示されるカウンターが含まれるようになりました。

続行