Blazor中如何获取点击按钮的value值更新计算器屏幕

你可以用两种方式实现需求，其中直接传参的方式是Blazor的推荐写法：

• 方式一：事件绑定直接传值（推荐）
  不需要额外读取DOM属性，只需要微调@onclick的绑定写法，将按钮对应的value值直接作为参数传入点击方法即可，性能好、逻辑直观，不会出现DOM元素定位错误的问题。

  1. 修改所有按钮的@onclick绑定，替换为lambda表达式传参，示例：

     <!-- 原AC按钮绑定 -->
     <button class="calc_button ac bg-grey" value="AC" @onclick = "GetValue">AC</button>
     <!-- 修改后 -->
     <button class="calc_button ac bg-grey" value="AC" @onclick="() => GetValue("AC")">AC</button>
     

     其余按钮按照相同规则修改，把对应按钮的value值传入GetValue方法即可，另外你现有代码中+/-按钮的文本前多写了一个>，记得同步修正。
  2. 修改@code块中的GetValue方法，接收字符串类型的按钮值参数，实现屏幕内容更新逻辑：

     @code{
         private string equation = "0";
         private void GetValue(string btnValue){
             // 不同按钮对应不同逻辑，可自行扩展
             switch(btnValue)
             {
                 case "AC":
                     // 清空按钮重置显示
                     equation = "0";
                     break;
                 case "=":
                     // 等号按钮做计算逻辑，此处可自行补充计算规则
                     break;
                 default:
                     // 数字、运算符输入：初始为0时直接替换，否则拼接内容
                     equation = equation == "0" ? btnValue : equation + btnValue;
                     break;
             }
         }
     }
     

• 方式二：通过事件参数读取按钮value属性
  如果你不想逐个修改按钮绑定，也可以通过鼠标事件参数配合JS互操作读取触发元素的value属性，但这种方式不推荐：一方面有JS互操作的性能开销，另一方面如果按钮内部嵌套了图标、span等子元素，事件target会指向子元素，导致无法正确读取按钮的value值。
  实现代码如下：

  1. 首先在组件顶部注入JS运行时：

     @inject IJSRuntime JS
     

  2. 修改GetValue方法接收MouseEventArgs参数，调用JS读取按钮value：

     @code{
         private string equation = "0";
         private async Task GetValue(MouseEventArgs e){
             // 读取触发事件的元素的value属性
             var btnValue = await JS.InvokeAsync<string>("eval", "event.target.value");
             // 后续更新逻辑和方式一一致
             switch(btnValue)
             {
                 case "AC":
                     equation = "0";
                     break;
                 case "=":
                     // 补充计算逻辑
                     break;
                 default:
                     equation = equation == "0" ? btnValue : equation + btnValue;
                     break;
             }
         }
     }
     

  这种方式不需要修改现有按钮的绑定写法，但稳定性和性能都不如第一种直接传参的方案。

内容的提问来源于stack exchange，提问作者Robert Martirosian