2

我试图在反应中创建一个计算器，但是当我进行计算时，它给了我语法错误。例如，当计算不同的数字天（30 + 23423 - 3428 * 5235）时，它给了我这个错误。我也无法让我的重置和退格和小数工作。有人可以帮忙吗

这是我的代码

import React, { Component } from 'react'
import Button from "./components/Button";
import Input from "./components/Input";
import {buttonData} from "./components/Data"


class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            input: [],
            result: 0,
            operator: "+"
        }
    }
    calculate = (num1, operator, num2) => {
        let result;
        // console.log("math");
        if(!isNaN(num2)) {
        result = eval(num1 + operator + num2) 
        this.setState({result})
        }
    }

    handleClick = (button) => {
    let input = [...this.state.input]
    let result = this.state.result;
    let operator = this.state.operator;
    const num = parseFloat(input.join(''))

    switch(true) {
        case /[+-\/\*]/.test(button):
        // console.log(operator);
        this.calculate(result, operator, num)
        operator = button;
        input = operator;
        break

        case/\d/.test(button):
        // console.log(button);
        if(/[+-\/\*]/.test(button)){
            input = []
            }
            input.push(button)
        break
    }
    
    if(button === "="){
        this.calculate(result, operator, num)
    }
    else if(button === "C"){
        this.reset()
    }
    else if(button === "CE"){
        this.backspace()
    }
    else if(button === "."){
        this.handleDecimal()
    }
    this.setState({input, operator})
};


    
    reset = () => {
        this.setState({ 
            input: "0",
            reset: []
        })
    };
    
    backspace = () => {
    this.setState({
        input: this.state.input.slice(0, -1)
    })
    };
    
    handleDecimal = () => {
    const { input } = this.state;
    // ! add the point only if no point is already included
    if(!/\./.test(input)) {
        this.setState({input: `${input}.`})
    }
    }
    
    
    
    render() {
        return (
        <div className="app">
        <div className="calc-wrapper">
            <h2>Tony's Calculator</h2>
            <div id="display" >
            <Input input={this.state.input}
            result={this.state.result}
            />
            </div>
            {buttonData.map((item) => {
                let name = item.button;
                let id = item.id;
            return <Button 
            key={id} 
            name={name} 
            id={id}
            value={name} 
            handleClick={this.handleClick} 
            />
            } )
            } 
        </div>
    </div>
        )
    }
}

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在此处输入链接描述

4

1 回答 1

0

当您尝试将eval()或alert()与包含--或++的数学表达式一起使用时，会发生错误

前任：

alert(-50--30.25*32)

将抛出：未捕获的语法错误：无效的递增/递减操作数

因此，您需要用括号括起您的值或用单个符号替换您的符号。

前任：

alert(-50-(-30.25)*32)

或者：

str.replace(/[-]{2}|[+]{2}/g, '+')

如果我正在构造一个字符串，我会使用括号，如果我正在读取一个字符串，我会使用正则表达式。

于 2022-03-01T16:10:25.077 回答