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

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

没有效果，因为该方法已经通过箭头函数绑定到this。然后您可以简单地使用：

onPress={this.startTimer}