Question

我在TimerContainer中返回了一个Timer组件

const Timer = ({ time = 0 }) => (
 <div className={styles.timer}>{formatTime(time)}</div>
);

Timer.propTypes = {
  time: PropTypes.number
};

class TimerContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      secondsElapsed: 0
    };
  }

  componentDidMount() {
    this.interval = setInterval(this.tick.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick() {
    this.setState({
      secondsElapsed: this.state.secondsElapsed + 1
    });
  }

  render() {
    return <Timer time={this.state.secondsElapsed} />;
  }
}

如何在我点击另一个Button组件时才启动它？在我的主要组件中，我有两个按钮功能

handleEasyCards() {
    this.setState(prevState => ({ currentCards: this.state.easyCards }));
  }

  handleHardCards() {
    this.setState({ currentCards: this.state.hardCards });
  }

  render() {
    return (
      <div style={boardContainer}>
        <div style={buttonContainer}>
          <Button
            difficulty={this.state.easyButton}
            onClick={this.handleEasyCards}
          />
          <Button
            difficulty={this.state.hardButton}
            onClick={this.handleHardCards}
          />
        </div>
        <Cards
          cardTypes={this.state.currentCards}
          removeMatches={this.removeMatches}
        />
      </div>
    );
  }
}

我想我需要将一个回调传递给Button组件，并在handleHardCards和handleEasyCards中调用它。我不认为这是一个条件渲染，因为Timer会以点击的Button开始。

Answer 1

您可以在州内拥有另一个变量：

  constructor(props) {
    super(props);
    this.state = {
      secondsElapsed: 0,
      isCountingTime: false,
    };
  }

然后在事件发生时更改该变量：

handleEasyCards() {
  this.setState(prevState => ({ 
    currentCards: this.state.easyCards,
    isCountingTime: true,
  }));
}

handleHardCards() {
  this.setState({ 
    currentCards: this.state.hardCards,
    isCountingTime: true,
  });
}

到目前为止Timer尚未安装，所以尚未开始计算。但是，isCountingTime设置为true，它将呈现并开始计数：

<div style={boardContainer}>
  {this.state.isCountingTime && <Timer />}
  ...
</div>

好的部分是，您只需将isCountingTime变量更改为true，即可随时“启动”和“重置”计时器。不好的部分是，当设置为false时，没有任何内容呈现（没有默认值）。

在onClick上呈现计时器组件

1 个答案: