javascript - React 中的计算器项目在计算表达式后按下数字时发生。附加所需的数字而不是添加

Question

我创建了一个计算器，并且所有按钮都正常工作。我需要帮助修复 1 个错误。当我将两个数字加在一起然后按任意数字键时，就会出现错误。它会将这两个数字加在一起，而不是将按下的数字附加到总和上。如果它在表达式求值之前，它追加就好了。

例如，当我按 do 1 + 1 时，计算器上的输出当然会变为 2。好吧，如果我此时按 2，它会将 2 添加到该总和中，而不是像现在这样附加 2预期。

第二个澄清的例子，当我按下 3 按钮、+ 按钮、3 按钮，最后是等于按钮时，它等于计算器上的 6。如果我然后按下 1 按钮，它会将计算器显示更改为 7 而不是 61。

代码沙箱:https://codesandbox.io/s/github/Critter4Dinner/Calculator

这是我发生问题的相关代码:

import React from 'react';
import AdditionButton from './AdditionButton';
import ClearButton from './ClearButton';
import DecimalButton from './DecimalButton';
import DivisionButton from './DivisionButton';
import EightButton from './EightButton';
import EqualsButton from './EqualsButton';
import FiveButton from './FiveButton';
import FourButton from './FourButton';
import NineButton from './NineButton';
import OneButton from './OneButton';
import OutputDisplay from './OutputDisplay';
import SevenButton from './SevenButton';
import SixButton from './SixButton';
import SubtractionButton from './SubtractionButton';
import ThreeButton from './ThreeButton';
import TwoButton from './TwoButton';
import ZeroButton from './ZeroButton';
import './CalculatorBase.scss';
import MultiplicationButton from './MultiplicationButton';


class CalculatorBase extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            output: 0
        }
        this.handleClick = this.handleClick.bind(this)
        this.handleClear = this.handleClear.bind(this)
        this.handleEquals = this.handleEquals.bind(this)
    }

        handleClick(currentButtonClicked){
            this.setState(prevState => {
                return {
                    output: `${prevState.output === 0 ? currentButtonClicked : prevState.output + currentButtonClicked}`
                }
            })
        }

        handleClear(){
            this.setState({output: 0})
        }

        handleEquals(){

          this.setState(prevState => {
                    return {
                        output: isNaN(prevState.output.slice(-1)) ? prevState.output : eval(prevState.output)
                    }
                })
            }



    render(){
        return (
            <main className="baseboard">
                <OutputDisplay placeThisOnScreen={this.state.output}/>
                <ClearButton handleClear={this.handleClear}/>
                <DivisionButton handleClick={this.handleClick}/>
                <SevenButton handleClick={this.handleClick}/>
                <EightButton handleClick={this.handleClick}/>
                <NineButton handleClick={this.handleClick}/>
                <MultiplicationButton handleClick={this.handleClick} />
                <FourButton handleClick={this.handleClick}/>
                <FiveButton handleClick={this.handleClick}/>
                <SixButton handleClick={this.handleClick}/>
                <AdditionButton handleClick={this.handleClick}/>
                <OneButton handleClick={this.handleClick}/>
                <TwoButton handleClick={this.handleClick}/>
                <ThreeButton handleClick={this.handleClick}/>
                <SubtractionButton handleClick={this.handleClick}/>
                <DecimalButton handleClick={this.handleClick}/>
                <ZeroButton handleClick={this.handleClick}/>
                <EqualsButton handleEquals={this.handleEquals}/>
            </main>
        )

    }
}

export default CalculatorBase;

Answer 1

您的 handleClick 函数中的变量插值似乎不正确。

这一行:

output: `${prevState.output === 0 ? currentButtonClicked : prevState.output + currentButtonClicked}`

应该是:

output: prevState.output === 0 ? currentButtonClicked : `${prevState.output}` + currentButtonClicked

这里正在工作sandbox基于您的代码。