Question

我正在尝试构建一个React Web应用（v 16.13.0）。我想要一个Flash消息组件，以在提交表单后显示状态。如果已经有了某种标准，那将是更好的选择，但是由于找不到任何东西，我正在尝试使用https://medium.com/@jaouad_45834/building-a-flash-message-component-with-react-js-6288da386d53来推出自己的标准。这是组件

import React, { useEffect, useState } from 'react';
import Bus from '../Utils/Bus';

import './index.css';

export const Flash = () => {
    let [visibility, setVisibility] = useState(false);
    let [message, setMessage] = useState('');
    let [type, setType] = useState('');

    useEffect(() => {
        Bus.addListener('flash', ({message, type}) => {
            setVisibility(true);
            setMessage(message);
            setType(type);
            setTimeout(() => {
                setVisibility(false);
            }, 4000);
        });


    }, []);

    useEffect(() => {
        if(document.querySelector('.close') !== null) {
            document.
            querySelector('.close').
            addEventListener('click', () => setVisibility(false));
        }
    })

    return (
        visibility && <div className={`alert alert-${type}`}>
                <span className="close"><strong>X</strong></span>
                <p>{message}</p>
            </div>
    )
}

问题是，网站使用自定义代码，但未显示源代码

        Bus.addListener('flash', ({message, type}) => {
            setVisibility(true);
            setMessage(message);
            setType(type);
            setTimeout(() => {
                setVisibility(false);
            }, 4000);
        });

所以我的问题是，如何向React组件添加事件侦听器？

编辑：为回答给出的答案，我创建了此文件...

localhost:client davea$ cat src/Utils/Bus.js 
import EventEmitter from 'events';
export default new EventEmitter();

但是重新编译我的模块会导致此错误...

./src/components/Flash/index.js
Module not found: Can't resolve '../Utils/Bus' in '/Users/davea/Documents/workspace/chicommons/maps/client/src/components/Flash'

这些是上面文件的第一行。注意我要导入“ Bus”的第二个“ import” ...

import React, { useEffect, useState } from 'react';
import Bus from '../Utils/Bus';

import './index.css';

export const Flash = () => {

Answer 1

该网站包含以下代码：https://medium.com/@jaouad_45834/building-a-flash-message-component-with-react-js-6288da386d53

To set that up, we need to create a new folder in our root directory and name it Utils and create on it a Bus.js file with will contains the following code:

import EventEmitter from 'events';
export default new EventEmitter();

这就是Bus.js的全部，一个简单的事件发射器。

您也可以为此使用react-toastify或useToasts。

Answer 2

为了显示Flash消息，您需要执行以下操作。

Bus.emit('flash', {type: 'danger', message: 'error occurred'});

我使用了您提供的代码，并将其与虚拟表单混合在一起。提交表单后，刷新消息会成功显示。

实时示例和工作代码在此处：

https://codesandbox.io/s/dazzling-lamarr-k3cn5

一些注意事项：

我已重构并删除了第二次useEffect，因为它效率低下且不必要。 onClick可以很好地应用于接近跨度元素
如果您正在使用redux，则可以使用create global Flash / Alert消息并将其连接到商店。任何redux-connected组件都可以简单地运行自己的逻辑并调度警报动作并呈现不同类型的消息。
使用现成的库也很酷。

Answer 3

我认为您想要的东西被广泛称为Toaster，您可以使用React Toastify [https://github.com/fkhadra/react-toastify]之类的库，配置简单且高度自定义

如何将事件侦听器添加到React组件？

3 个答案: