如何向 React 组件添加事件监听器？

Question

我正在尝试构建一个 React 网络应用程序 (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'

这些是上面文件的第一行。请注意第二个 "import" 我正在导入 "Bus" ...

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 or useToasts。

Answer 2

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

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

我已经使用了您提供的代码并将其与虚拟表单混合使用。提交表单后，闪现消息成功出现。

实例和工作代码在这里：

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

一些注意事项：

我重构并删除了第二个 useEffect，因为它效率低下且不必要。 onClick 可以很好地应用于 close-span-element
如果您使用的是 redux，则可以使用创建全局 Flash/Alert 消息并将其连接到商店。任何 redux-connected-component 都可以简单地运行自己的逻辑并发送警报操作并呈现不同类型的消息。
使用现成的库也很酷。

Answer 3

我想你想要的是广为人知的烤面包机，你可以使用像 React Toastify 这样的库 [https://github.com/fkhadra/react-toastify] 配置简单，自定义程度高

如何向 React 组件添加事件监听器？

How do I add an event listener to a React component?

events

addeventlistener

flash-message

reactjs