当我单击计算器键时，它有时会随机console.logs“未定义”

Question

我有一个问题，我觉得解释起来有点复杂。

我有计算器按钮，在数字上，当我单击它们时，它会将值记录到控制台。问题是，在不断点击多个按钮后，最终它会记录“未定义”。

但是，单击计算器中的其他任何位置（显示屏、其他按钮或背景）后，以及单击其他位置后，同一按钮现在会返回其值。

这种情况是随机发生的，看起来不符合逻辑。希望我能解释清楚自己。

再次提前感谢您。

这是当前代码的链接https://calculator-app-topaz.vercel.app/

export default function CalculatorKeys(props) {
    const btnPressed = (e) =>{
        var target = e.target.value;
        console.log(target);
    };
    return(
        <div id = 'keysGridContainer'>
            <button className = 'gridItem gridKey1' value = '7' onClick = {btnPressed}><span>7</span></button>
            <button className = 'gridItem gridKey2' value = '8' onClick = {btnPressed}><span>8</span></button>
            <button className = 'gridItem gridKey3' value = '9' onClick = {btnPressed}><span>9</span></button>
            <button className = 'gridItem gridKey4'><span>DEL</span></button>

            <button className = 'gridItem gridKey5' value = '4' onClick = {btnPressed}><span>4</span></button>
            <button className = 'gridItem gridKey6' value = '5' onClick = {btnPressed}><span>5</span></button>
            <button className = 'gridItem gridKey7' value = '6' onClick = {btnPressed}><span>6</span></button>
            <button className = 'gridItem gridKey8'><span>+</span></button>

            <button className = 'gridItem gridKey9' value = '1' onClick = {btnPressed}><span>1</span></button>
            <button className = 'gridItem gridKey10' value = '2' onClick = {btnPressed}><span>2</span></button>
            <button className = 'gridItem gridKey11' value = '3' onClick = {btnPressed}><span>3</span></button>
            <button className = 'gridItem gridKey12'><span>-</span></button>

            <button className = 'gridItem gridKey13'><span>.</span></button>
            <button className = 'gridItem gridKey14' value = '0' onClick = {btnPressed}><span>0</span></button>
            <button className = 'gridItem gridKey15'><span>/</span></button>
            <button className = 'gridItem gridKey16'><span>x</span></button>

            <button className = 'gridItem gridKey17'><span>RESET</span></button>
            <button className = 'gridItem gridKey18'><span>=</span></button>
        </div>
    );
}

Answer 1

将

e.target

替换为

e.currentTarget

。

e.target

是引起点击操作的元素。在您的情况下，它可以是

<span>

元素，以及按钮元素。

<span>

没有

value

，这就是为什么每当您精确单击

undefined

时都会得到

<span>

。

e.currentTarget

是侦听器附加到的元素。

以我的拙见，

target

和

currentTarget

的命名有点不幸，并且引起了很多混乱。

Answer 2

使用

e.currentTarget.value

获取特定按钮的值