时间戳

首页 > 解决方案 > 如何通过单击按钮而不是在页面加载时启动倒数计时器？

reactjs - 如何通过单击按钮而不是在页面加载时启动倒数计时器？

问题描述

在我的代码下面，我有一个计时器，它会在页面加载后立即开始倒计时。我正在尝试使用 onClick 在按下按钮后启动倒计时，但在页面加载后它仍在启动。我怎样才能让它开始 onClick？

import * as React from "react";
import { render } from "react-dom";
import { View, Switch, StyleSheet, Text, Button, TouchableOpacity } from "react-native";

import CircularProgressBar from '../components/CircularProgressBar';

function SimpleTimer() {
  const [counter, setCounter] = React.useState(60);

  function timer () {
    React.useEffect(() => {
        counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
      }, [counter]);
    
  }

  return (
    <View className="App">
      <Text>Countdown: {counter}</Text>
      <CircularProgressBar percent={counter}></CircularProgressBar>
      <TouchableOpacity><Button style={styles.button} title='start timer' onPress={timer()}></Button></TouchableOpacity>
    </View>
  );
}


export default SimpleTimer;

标签： reactjsreact-nativecallback

解决方案

我不知道你为什么使用 useEffect，你应该仔细检查它的用例。除了这里你是：

function SimpleTimer() {
  const [counter, setCounter] = React.useState(60);
  const [intervalId, setIntervalId] = React.useState(null)

  function timer () {
    if (counter > 0) {
        const id = setInterval(() => setCounter(counter - 1), 1000);
        setIntervalId(id)
    }
  }

  return (
    <View className="App">
      <Text>Countdown: {counter}</Text>
      <CircularProgressBar percent={counter}></CircularProgressBar>
      <TouchableOpacity><Button style={styles.button} title='start timer' onPress={timer}></Button></TouchableOpacity>
    </View>
  );
}

除了 useEffect 问题之外，在启动时触发计时器的是 line onPress={timer()}。这是一个拼写错误，您不想在渲染时运行该功能，但是当按下按钮时，您应该有onPress={timer}or onPress={() => timer()}。

尽我所能用我所掌握的英语：D

推荐阅读