Help us understand the problem. What is going on with this article?

処理待ち中にボタンの上にSpinnerを表示する(React版)

More than 1 year has passed since last update.

これは、初心者歓迎!Reactとvte.cxでWebアプリケーションを作成する#2<動作確認〜ソース解説>の説明に使う予定の資料です。

今回は、Reactの理解のために、処理待ち中にボタンの上にSpinnerを表示する実装について説明します。
こんな感じで、メールを送信するボタンを押すと、クルクル回るスピナーを表示するものです。

develop.gif

ソース解説

パスワードリセット画面のソースの一部を抜粋したものが以下になります。

ロジックの部分

まず、stateにisLoadingを追加します。(初期値はfalse)
サーバアクセス時に、trueにし、実行後にfalseにするだけです。

constructor() {
    this.state = { isLoading: false }
}
handleSubmit(e:InputEvent){
    this.setState({isLoading:true})
    axios({
         ・・・
    }).then( () => {
        this.setState({isLoading:false})
    }).catch((error) => {
        this.setState({isLoading:false})
    }
}

JSXの部分

JSXでは、isLoadingがfalseのときに「メールを送信する」を、trueのときに、スピナーと「送信中」を表示するようにします。disabledを指定すると送信中はボタンを押せなくなります。

<Button type="submit" className="btn btn-lg login_form__btn--submit" disabled={this.state.isLoading}>
{this.state.isLoading ? <span><span className="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> 送信中</span> : 'メールを送信する'}
</Button>

CSSの部分

スピナーは、イメージ画像ではなく、css3のanimationが使われています。
参考:Animated button

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
stakezaki
アイコンに顔が似ているといわれると喜びます
http://blog.virtual-tech.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away