在反应中显示 Flash 消息

Question

我的任务是在点击提交按钮时显示闪现消息（"successfully created"）。[点击提交按钮后，数据将存储在服务器中]我有运行这个命令 npm我反应快闪消息。

<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'))
      }
     }

我已经评论了我试图显示闪现消息的代码。但它不起作用。请有人帮我显示 flash 消息。

Answer 1

简单易行.. 每当使用 onSubmit 时，不要忘记使用 event.preventDefault()..

并尝试只使用一个 then 块。

现在维护一个状态变量，用来设置结果的状态。获取结果后，将结果状态设置为 true。

渲染您的 FlashMessage 组件，当它为真时。

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

Answer 2

根据 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 disappear 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'))
      }
}

main 函数如果你使用 class:

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

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

在反应中显示 Flash 消息

displaying Flash message in react

flash-message

reactjs