Как добавить прослушиватель событий в компонент React? - PullRequest
Новая
       51

Как добавить прослушиватель событий в компонент React?

0 голосов
/ 28 марта 2020

Я пытаюсь создать веб-приложение React (v 16.13.0). Я хочу, чтобы компонент сообщения fla sh отображал состояние после отправки формы. Если уже есть что-то стандартное, это было бы предпочтительнее, но поскольку я ничего не могу найти, я пытаюсь свернуть свое собственное, используя это - https://medium.com/@jaouad_45834 / building-a-fla sh -message -компонент с реакцией- 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 React, { useEffect, useState } from 'react';
import Bus from '../Utils/Bus';

import './index.css';

export const Flash = () => {

Ответы [ 3 ]

0 голосов
/ 05 апреля 2020

Чтобы показать сообщение fla sh, вам нужно сделать что-то вроде следующего: 

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

Я использовал предоставленный вами код и смешал его с фиктивной формой. После отправки формы сообщение fla sh появляется успешно.

enter image description here

Живой пример и рабочий код здесь:

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

Некоторые примечания:

  • Я произвел рефакторинг и удалил 2-й useEffect, поскольку он неэффективен и не нужен. OnClick вполне может быть применен к элементу close-span
  • . Если вы используете redux, вы можете создать глобальное Flash / Alert сообщение и подключить его к магазину. Любой компонент, связанный с redux-соединением, может просто работать со своей собственной логикой c, отправлять действие оповещения и отображать различные типы сообщений.
  • Использование готовых библиотек также здорово.
0 голосов
/ 06 апреля 2020

Я думаю, что то, что вы хотите, широко известно как тостер, и вы можете использовать такую ​​библиотеку, как React Toastify [https://github.com/fkhadra/react-toastify] с простой конфигурацией и высокой настройкой

0 голосов
/ 01 апреля 2020

На сайте указан код: https://medium.com/@jaouad_45834 / building-a-fla sh -компонентный компонент-с-реакцией- 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();

Это все шина. js - это простой источник событий.

Для этого вы также можете использовать response-toastify или useToasts .

...