Day 11 Arbitrary attributes

目前MyButton有3个[Parameter]，如果再增加的话，又要再定义新的[Parameter]，为了避免不断更动这个Component，我们来用Blazor提供的@attribute。

首先把原本的<button>改为<input>，在MyButton.razor定义一个带有[Parameter]的变数InputAttributes，型别为Dictionary<string, object>，先给预设值，如果外部没有传入这个参数的话就会套用预设值。

接着在PostBase.razor.cs也定义一个同名变数，不过里面的value跟class有稍微改动。

最後Post.razor叫用的MyButton只传入InputAttributes，这样就完成了。

不过好像哪里怪怪的，因为只用了一个变数InputAttributes，导致原本的Reset按钮跟Submit变得一样了，但如果再定义一个为Reset产生的变数，又跟原本一样麻烦了。

这时候就要用到[Parameter]的参数CaptureUnmatchedValues了，我们将原本的[Parameter]改成[Parameter(CaptureUnmatchedValues = true)]或是[Parameter(true)]也行，告诉Blazor这个变数会捕捉任何不符合InputAttributes中定义的值。

接着把PostBase.razor.cs的变数InputAttributes删除，因为不能再这样定义了，我们等一下来看看如果保留的话会有什麽结果。

最後PostBase.razor随意给<MyButton>我们想要的html attribute，就可以看到变回Submit跟Reset按钮了，要注意的是因为变成我们自由定义，所以没有了强型别的约束。

这时候有人可能会发现，两个<MyButton>有个相同html attribute type，既然重复，可以定义在PostBase.razor.cs的InputAttributes吗？

可惜错误讯息告诉我们：如果用了CaptureUnmatchedValues就不能明确定义InputAttributes了，所以使用的人须特别注意这点。

还有一点是html attribute的读取顺序是由右到左，若有重复的html attribute，右边的会覆盖左边的，我们在MyButton.razor的@attribute右边加上value="MyButton"，开启网页可以看到两颗按钮都变成Mybutton了，所以若要给预设值的话，最好是放在@attribute左边，以免覆盖传进来的值。

Ref: Blazor Attribute Splatting

Ref: Arbitrary attributes and parameters in Blazor