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

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&nbsp;=&nbsp;()&nbsp;=>&nbsp;...使用：this.startTimer.bind没有效果，因为该方法已经通过箭头函数绑定到this。然后您可以简单地使用：onPress={this.startTimer}