web-dev-qa-db-ja.com

ReactにFlashメッセージを表示する

マイタスクは、送信ボタンをクリックするとフラッシュメッセージ（「正常に作成」）を表示します。[送信ボタンをクリックすると、データがサーバーに保存されます]このコマンドを実行しました.npm i react-flash-messageを実行します。

<form onSubmit={this.handleSubmit}>
   <input type="submit" value="Submit" />
 </form>
 _

ハンドルサブマット機能：

  handleSubmit(event) {
     fetch('url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: this.state.name,
                description: this.state.description
            })
        }).then(res => {
            return res.json()
        })
            .then(data => console.log(data))
            .then(() => {
                window.location.reload(false)
                /* return (
                     <div>
                        <FlashMessage duration={5000}>
                            <strong>I will disapper in 5 seconds!</strong>
                       </FlashMessage>
                   </div>
                 ) */
            })
            /* window.flash('record has been created successfully!', 'success') */

            .catch(error => console.log('ERROR from create component'))
      }
     }
 _

私はフラッシュメッセージを表示しようとしたコードをコメントしました。しかしそれは機能していません。誰かがフラッシュメッセージを表示するのに役立ちます。

reactjsflash-message
3
user3359964

React-Flash-Messageページによると、FlashMessageをレンダリングに含める必要があります。そのため、FlashMessageを表示したい場合は、Trueとして設定するフラグ変数を持つ必要があるかもしれません。

例：あなたのレンダリングで：

<form onSubmit={this.handleSubmit}>
   <input type="submit" value="Submit" />
   { this.state.showMessage &&  
        <div>
            <FlashMessage duration={5000}>
                <strong>I will disapper in 5 seconds!</strong>
            </FlashMessage>
        </div>
   }

 </form>
 _

ハンドルサブマット機能：

handleSubmit(event) {
 this.setState({ showMessage: false });
 fetch('url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: this.state.name,
                description: this.state.description
            })
        }).then(res => {
            return res.json()
        })
            .then(data => console.log(data))
            .then(() => {
                this.setState({ showMessage: true });
            })
            /* window.flash('record has been created successfully!', 'success') */

            .catch(error => console.log('ERROR from create component'))
      }
}
 _

クラスを使用している場合のメイン機能：

 constructor(props) {
    super(props);
    this.state = {
      showMessage: false
    };
  }
 _

https://www.npmjs.com/package/React-flash-message

2
mgiatti

簡単な厄介な.. onsubmitを使用しているときはいつでも、Event.PreventDefault（）を使用することを忘れないでください..

そしてそれからブロックのみを使ってみてください。

結果のステータスを設定するために、状態変数を維持するようになりました。結果が取得されると、結果のステータスをtrueに設定します。

FlashMessageコンポーネントをtrueのときにレンダリングします。

https://codesandbox.io/s/lucid-taussig-9x0o

1
Barun Patro