Question

在使用倒数计时器时，我希望能够在按下按钮时重新开始倒数计时，但是，我认为按钮没有功能，因为我没有得到任何反馈。有人能指出我正确的方向吗？下面是我要实现的精简示例代码。

export default class Example extends Component {
  constructor(props) {
      super(props);
      this.state = {
          timer: 10,
          timesup: false,
          timing: true,
          showWelcome: true,
      };
  }

  componentDidMount() {
      this.clockCall = setInterval(() => {
          this.decrementClock();
      }, 1000);
  }

  startTimer = () => {
      this.setState({
          timing: true,
          timer: 30,
          showWelcome: false
      })
  }


  decrementClock = () => {
      this.setState((prevstate) => ({
          timer: prevstate.timer - 1
      }), () => {
          if (this.state.timer === 0) {
              clearInterval(this.clockCall)
              this.setState({
                  timesup: true,
                  timing: false,
                  showWelcome: false,
              })
          }
      })
  }


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


  render() {
      return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

  {this.state.timesup && (
      <Text style={{fontSize: 18, color: '#000'}}>
      Time up
      </Text>)}


  {this.state.timing && (
      <Text style={{fontSize: 18, color: '#000'}}>
      {this.state.timer}
      </Text>)}

        {this.state.showWelcome && (
          <Text style={{ fontSize: 20 }}>Welcome</Text>
        )}

        <Button Onpress={this.startTimer.bind(this)} title='play' />
      </View>
      )
  }
}

Answer 1

我相信您正在寻找的是onPress，而不是Onpress。另外，如果您使用的是：

startTimer = () => ...

使用：

this.startTimer.bind

无效，因为该方法已通过箭头功能绑定到此。然后，您可以简单地使用：

onPress={this.startTimer}

在本机中重新启动倒数计时器

1 个答案: