[英]How do I get the value from the button? blazor
I ran into a bit of a silly problem.我遇到了一个愚蠢的问题。 I have this piece of code with button values and method when pressed, but how do I get the button value itself to change the calculator screen?
按下时,我有这段带有按钮值和方法的代码,但是如何获取按钮值本身来更改计算器屏幕?
<div class="text-center">
<div class="calc">
<div class="calc_screen">
<p>@equation</p>
</div>
<div class="calc_buttons">
<button class="calc_button ac bg-grey" value="AC" @onclick = "GetValue">AC</button>
<button class="calc_button plus-minus bg-grey" value="+/-" @onclick = "GetValue">>+/-</button>
<button class="calc_button percent bg-grey" value="%" @onclick = "GetValue">%</button>
<button class="calc_button division bg-orange" value="/" @onclick = "GetValue">/</button>
<button class="calc_button seven" value="7" @onclick = "GetValue">7</button>
<button class="calc_button eight" value="8" @onclick = "GetValue">8</button>
<button class="calc_button nine" value="9" @onclick = "GetValue">9</button>
<button class="calc_button multiply bg-orange" value="X" @onclick = "GetValue">X</button>
<button class="calc_button four" value="4" @onclick = "GetValue">4</button>
<button class="calc_button five" value="5" @onclick = "GetValue">5</button>
<button class="calc_button six" value="6" @onclick = "GetValue">6</button>
<button class="calc_button minus bg-orange" value="-" @onclick = "GetValue">-</button>
<button class="calc_button one" value="1" @onclick = "GetValue">1</button>
<button class="calc_button two" value="2" @onclick = "GetValue">2</button>
<button class="calc_button three" value="3" @onclick = "GetValue">3</button>
<button class="calc_button plus bg-orange" value="+" @onclick = "GetValue">+</button>
<button class="calc_button zero" value="0" @onclick = "GetValue">0</button>
<button class="calc_button dot" value="," @onclick = "GetValue">,</button>
<button class="calc_button equal bg-orange" value="=" @onclick = "GetValue">=</button>
</div>
</div>
</div>
@code{
private string equation = "0";
private void GetValue(){
equation = "some value of the button";
}
}
For this type of thing, you need to pass the value into the event handler, like this对于这种类型的事情,您需要将值传递给事件处理程序,就像这样
<button @onclick=@(_=>GetValue("AC"))>AC</button>
And, of course your handler needs to accept the value而且,当然您的处理程序需要接受该值
private void GetValue(string value)
{
equation = value;
}
Try something like this:尝试这样的事情:
private void GetValue(object sender, EventArgs e){
equation = sender.value;
}
Try following code:试试下面的代码:
<div class="text-center">
<div class="calc">
<div class="calc_screen">
<p>@equation</p>
</div>
<div class="calc_buttons">
<button class="calc_button ac bg-grey" value="AC" @onclick="@(_=>GetValue("AC"))">AC</button>
<button class="calc_button plus-minus bg-grey" value="+/-" @onclick="@(_=>GetValue("+/-"))">+/-</button>
<button class="calc_button percent bg-grey" value="%" @onclick="@(_=>GetValue("%"))">%</button>
<button class="calc_button division bg-orange" value="/" @onclick="@(_=>GetValue("/"))">/</button>
<button class="calc_button seven" value="7" @onclick="@(_=>GetValue("7"))">7</button>
<button class="calc_button eight" value="8" @onclick="@(_=>GetValue("8"))">8</button>
<button class="calc_button nine" value="9" @onclick="@(_=>GetValue("9"))">9</button>
<button class="calc_button multiply bg-orange" value="X" @onclick="@(_=>GetValue("X"))">X</button>
<button class="calc_button four" value="4" @onclick="@(_=>GetValue("4"))">4</button>
<button class="calc_button five" value="5" @onclick="@(_=>GetValue("5"))">5</button>
<button class="calc_button six" value="6" @onclick="@(_=>GetValue("6"))">6</button>
<button class="calc_button minus bg-orange" value="-" @onclick="@(_=>GetValue("-"))">-</button>
<button class="calc_button one" value="1" @onclick="@(_=>GetValue("1"))">1</button>
<button class="calc_button two" value="2" @onclick="@(_=>GetValue("2"))">2</button>
<button class="calc_button three" value="3" @onclick="@(_=>GetValue("3"))">3</button>
<button class="calc_button plus bg-orange" value="+" @onclick="@(_=>GetValue("+"))">+</button>
<button class="calc_button zero" value="0" @onclick="@(_=>GetValue("0"))">0</button>
<button class="calc_button dot" value="," @onclick="@(_=>GetValue(","))">,</button>
<button class="calc_button equal bg-orange" value="=" @onclick="@(_=>GetValue("="))">=</button>
</div>
</div>
</div>
@code{
private string equation = "0";
private void GetValue(String StrValue)
{
equation = StrValue;
StateHasChanged();
}
}
And don't forget to use StateHasChanged();
并且不要忘记使用
StateHasChanged();
after calling methodes.在调用方法之后。 Result:
结果:
Did you tried?你试过了吗?
@code{
private string equation = "0";
private void GetValue(){
equation = document.getElementByClassName("calc_button").innerHTML;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.