React註冊倒計時功能

1、React版本
16.4.1
2、具體代碼以下

1. 設置state屬性

constructor(props){
        super(props);
        this.state = {
            btnText:'獲取驗證碼',
            seconds: 60, //稱數初始化
            liked: true //獲取驗證碼文案
        }
    }

2.倒計時

// 獲取驗證碼
    sendCode = () => {
        let siv = setInterval(() => {
            this.setState({
                liked:false,
                seconds:this.state.seconds - 1,    
            },() => {
                if(this.state.seconds == 0){
                    clearInterval(siv);
                    this.setState({
                        liked:true,
                        secounds:60
                    })
                }
            });    
        },1000);    
    }

3.jsx代碼

<FormItem
              {...formItemLayout}
              label="驗證碼"
            >
              <Row gutter={8}>
                <Col span={6}>
                  {getFieldDecorator('captcha', {
                    rules: [{ required: true, message: '請輸入短信驗證碼!' }],
                  })(
                    <Input />
                  )}
                </Col>
                <Col span={12}>
                    <Button onClick={this.sendCode} disabled={!this.state.liked}>
                    {
                        this.state.liked
                        ?
                          <span>{this.state.btnText}</span>
                          :
                          <span>{this.state.seconds  + ' s 後從新發送'}</span>
                    }
                    </Button>
                </Col>
              </Row>
            </FormItem>

明明很簡單的，可是看網上有的代碼搞得很複雜同樣，固然也能夠用react相關插件，不過我以爲這樣更簡潔。