我试图设计一个基本的计算器应用程序使用React，这是有以下设计。

灰色区域中有两个文本框，第一个用于输入，第二个用于输出。
在我的本地，当我点击按钮，例如：8和3，并尝试做任何数学运算，该值不会显示在输入文本框中，也不会在输出文本框中看到最终结果。
我尝试了以下解决方案：
如下面的代码所示，有一个handleClick函数，用于处理每个按钮的单击操作，并且此函数将作为属性传递给Button组件。
在handleClick事件中，我们使用switch关键字对不同的按钮执行不同的操作。
问题：在"="开关大小写中，以下代码行
ans = eval（此状态问题）;
给出空结果。
预期输出：ans变量应根据数学运算生成正确的值。

handleClick(event){

    // get the value from the target element (button)
    const value = event.target.value;
    
    switch (value) {
        case '=': {
    
        // if it's an equal sign, use the eval module
        // to evaluate the question ,convert the answer
        // (in number) to String
        if (this.state.question!=='')
         {
            var ans='';
                try
                {
                    ans = eval(this.state.question);
                }
                catch(err)
                {
                    this.setState({answer: "Math Error"});
                }
                if (ans === undefined)
                    this.setState({answer: "Math Error"});
    
                // update answer in our state.
                else
                    this.setState({ answer: ans , question: ''});
                break;
         }
         break;
        }
        case 'Clear': {
    
        // if it's the Clears sign, just clean our
        // question and answer in the state
        this.setState({ question: '', answer: '' });
        break;
        }
    
        case 'Delete': {
        var str = this.state.question;
        str = str.substr(0,str.length-1);
        this.setState({question: str});
        break;
        }
    
    default: {
    
        // for every other command, update the answer in the state
        this.setState({ question: this.state.question += value})
        break;
        }
    }
    }

render()
    {
    return (
    <div className="frame">
    <CalculatorTitle value="GeeksforGeeks Calculator"/>
    <div className="mainCalc">
    <OutputScreen/>
    <div className="button-row">
    <Button handleClick = {this.handleClick}
     label={'Clear'}/>
    <Button handleClick = {this.handleClick}
     label={'Delete'}/>
    <Button handleClick = {this.handleClick}
     label={'.'}/>
    <Button handleClick = {this.handleClick}
     label={'/'}/>
    </div>
    <div className="button-row">
    <Button handleClick = {this.handleClick}
     label={'7'}/>
    <Button handleClick = {this.handleClick}
     label={'8'}/>
    <Button handleClick = {this.handleClick}
     label={'9'}/>
    <Button handleClick = {this.handleClick}
     label={'*'}/>
    </div>
    <div className="button-row">
    <Button handleClick = {this.handleClick}
     label={'4'}/>
    <Button handleClick = {this.handleClick}
     label={'5'}/>
    <Button handleClick = {this.handleClick}
     label={'6'}/>
    <Button handleClick = {this.handleClick}
     label={'-'}/>
    </div>
    <div className="button-row">
    <Button handleClick = {this.handleClick}
     label={'1'}/>
    <Button handleClick = {this.handleClick}
     label={'2'}/>
    <Button handleClick = {this.handleClick}
     label={'3'}/>
    <Button handleClick = {this.handleClick}
     label={'+'}/>
    </div>
    <div className="button-row">
    <Button handleClick = {this.handleClick}
     label={'0'}/>
    <Button handleClick = {this.handleClick}
     label={'='}/>
    </div>
    </div>
    </div>
    );
    }