1

我正在做一个基于 JS 的计算器应用程序。我在一个特定部分面临问题，其中我有一个元素 displayTop 用于显示计算器的整个操作。问题出现了，如果我有一个以符号（+、-、*、/）结尾的表达式，那么按下另一个符号必须更新表达式以以该特定符号结尾。所以我使用了替换功能，即使它暂时更新了显示中的值，console.log 仍然保持不变。

这是我的代码：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "./Button.js";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      displayTop: 0,
      displayBot: 0,
      value: "Final Value",
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (id, name) => {
    if (this.state.displayBot == 0 && name != "AC") {
      this.setState({
        displayTop: name,
        displayBot: name,
      });
    } else if (name == "AC") {
      this.setState({
        displayTop: 0,
        displayBot: 0,
      });
    } else if (
      this.state.displayBot == "+" ||
      this.state.displayBot == "-" ||
      this.state.displayBot == "*" ||
      this.state.displayBot == "/"
    ) {
      this.setState({
        displayBot: name,
      });
      if (
        this.state.displayTop.endsWith("+") == true ||
        this.state.displayTop.endsWith("-") == true ||
        this.state.displayTop.endsWith("*") == true ||
        this.state.displayTop.endsWith("/") == true
      ) {

现在这是出现问题的地方：

        if (name == "+" || name == "-" || name == "*" || name == "/")
          console.log("ends with symbol");
        this.setState({
          displayTop: this.state.displayTop.replace(/.$/, name),
        });
        console.log(this.state.displayTop);

concole.log 仍然显示以前的值。

      }
    } else {
      this.setState({
        displayTop: this.state.displayTop + name,
      });
      switch (name) {
        case "+":
        case "-":
        case "*":
        case "/":
          this.setState({ displayBot: name });
          break;
        case "=":
          this.setState({ displayBot: this.state.value });
          this.setState({
            displayTop: this.state.displayTop + name + this.state.value,
          });
          break;
        default:
          this.setState({ displayBot: this.state.displayBot + name });
      }
    }
  };

  render() {
    return (
      <div id="container">
        <div id="displayTop">{this.state.displayTop}</div>
        <div id="display">{this.state.displayBot}</div>
        <Button onClick={this.handleClick} />
      </div>
    );
  }
}
export default App;
4

2 回答 2

1

正确的问题可能是您正在使用 setState 并在内部进行操作：

if (name == "+" || name == "-" || name == "*" || name == "/")
      console.log("ends with symbol");
    this.setState({
      displayTop: this.state.displayTop.replace(/.$/, name),
    });

试试这样：

if (name == "+" || name == "-" || name == "*" || name == "/")
    const newValue = this.state.displayTop.replace(/.$/, name);        
    this.setState({
      displayTop: newValue,
    });
于 2020-04-16T18:51:52.407 回答
1

嗨，当您使用 setState 使用之前的状态值（如this.state.displayTop ）更新您的状态时，您应该始终使用 setState 回调。

if (name == "+" || name == "-" || name == "*" || name == "/")
    const newValue = this.state.displayTop.replace(/.$/, name);        
    this.setState(prevState => ({
      displayTop: prevState.displayTop.replace(/.$/, name)
    }));

请阅读本文了解 setState 回调

于 2020-04-16T19:01:03.497 回答