如果特定className处于活动状态，则在x秒内反应更改className

Question

我刚刚开始学习React，我正在尝试创建一个简单的React time应用程序。我有点卡住了，不知道该怎么解决。我可以解决它来改变点击时的className，但我想添加一个函数，它只在“游戏区域关闭”处于活动状态时运行，它应该在3-6秒之间的随机时间将类名更改为“游戏区域打开”。到目前为止，我已经想出了代码：

import "./App.css";
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true, gameClass: "game-area-start" };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((state) => ({
      isToggleOn: !state.isToggleOn,
      gameClass: state.isToggleOn ? "game-area-off" : "game-area-start",
      
    }));
  }

  render() {
    return (
      <div className={this.state.gameClass} onClick={this.handleClick}>
        <h1 className="default-text">
          {this.state.isToggleOn ? "Click anywhere to start" : "Wait for green"}
        </h1>
      </div>
    );
  }
}

export default App;

Answer 1

在handleClick回调中，您可以使用带有随机延迟的超时来切换“游戏区域开启”状态。

const randomDelay = Math.random() * 3000 + 3000;
setTimeout(() => {
  this.setState({
    // set go state
  });
}, randomDelay);

我建议使用两个状态，第一个用于跟踪应用程序何时等待显示"on“值，第二个用于显示它。此外，类名可以从状态派生，因此它实际上不属于状态，因为它很容易在render方法中计算。

下面是建议的代码：

class ReactionTime extends React.Component {
  state = {
    gameRunning: false,
    isToggleOn: false,
    startTime: 0,
    endTime: 0
  };

  // timeout refs
  clearOutTimer = null;
  gameStartTime = null;

  componentWillUnmount() {
    // clear any running timeouts when the component unmounts
    clearTimeout(this.clearOutTimer);
    clearTimeout(this.gameStartTime);
  }

  handleClick = () => {
    if (this.state.gameRunning) {
      // handle end click
      if (this.state.isToggleOn) {
        clearTimeout(this.clearOutTimer);
        this.setState({
          gameRunning: false,
          isToggleOn: false,
          endTime: performance.now()
        });
      }
    } else {
      // handle start click - reaction "game" started
      this.setState((prevState) => ({
        gameRunning: true,
        isToggleOn: false,
        startTime: 0,
        endTime: 0
      }));

      // set timeout to display "on"
      const randomDelay = Math.random() * 3000 + 3000;
      setTimeout(() => {
        this.setState({
          isToggleOn: true,
          startTime: performance.now()
        });
      }, randomDelay);

      // reaction "game" timeout to reset if user is too slow
      this.clearOutTimer = setTimeout(() => {
        this.setState({
          gameRunning: false,
          isToggleOn: false,
          startTime: 0,
          endTime: 0
        });
      }, 10000); // 10 seconds
    }
  };

  render() {
    const { gameRunning, isToggleOn, startTime, endTime } = this.state;
    const className = gameRunning
      ? isToggleOn
        ? "game-area-on"
        : "game-area-off"
      : "game-area-start";

    const reactionTime = Number(endTime - startTime).toFixed(3);
    return (
      <div className={className} onClick={this.handleClick}>
        <h1 className="default-text">
          {gameRunning
            ? isToggleOn
              ? "Go!"
              : "Wait for green"
            : "Click anywhere to start"}
        </h1>
        {reactionTime > 0 && <div>Reaction Time: {reactionTime}ms</div>}
      </div>
    );
  }
}

​

​