Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@HashibamiAkira

【React】一定時間で消える表示を作る

前回作ったサクセスメッセージがいつまでも表示されるのは如何なものかと思い、今回は表示後に何秒か経ったら消えるようにしました。

前回
【React】Railsでsaveされた時に、Reactでサクセスメッセージを表示

今回の完成形

思った以上に簡単、と言うか思いっきりJavaScriptの書き方だったので勉強不足を感じました。

setTimeout()を使ってstateを変更する

前回、state の値が true か false かでメッセージを表示させる、という風に作成しました。

初期値がfalseのstateをtrueでメッセージを表示させたので、逆にtrueをfalseに戻せばOKということです。

まずは初期値。

  state = {
    books: [],
    successCreate: false
  }

  createBook = (title, body) => {
    axios
      .post('http://localhost:3001/books', { title: title, body: body})
      .then((response) => {
        const newData = update(this.state.books, { $push: [response.data]})
        this.setState({books: newData, successCreate: true})
      })
  }

rails側のcreateが呼ばれ、データがsaveされるとfalseがtrueに変わる、というものです。

このtrueを何秒後かにfalseにsetStateするようにします。

  createBook = (title, body) => {
    axios
      .post('http://localhost:3001/books', { title: title, body: body})
      .then((response) => {
        const newData = update(this.state.books, { $push: [response.data]})
        this.setState({books: newData, successCreate: true})
        // ここから追記
        setTimeout(function(){
          this.setState({successCreate: false})
        }.bind(this),3000)
      })
  }

これは3秒後にstateを変更するようにしています。

stateがfalseになるので表示されていたメッセージは消えるようになります。

おそらくあまりに初歩的な内容なので調べても全然出てこなかった!!
もっと精進してさくっと実装できる力を付けたいものです

1
Help us understand the problem. What is going on with this article?
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
1
Help us understand the problem. What is going on with this article?