Использование событий из StencilJS в ReactJS с помощью React Hooks?

Кому-нибудь удалось найти способ использования пользовательских событий, созданных в StencilJS, в ReactJS с использованием хуков React useRef () и useEffect ()?

Я просмотрел документацию StencilJS для этого, они охватывают это только для массивов и настраиваемых объектов.

Я новичок в фронтенд-разработке, поэтому любая помощь будет шагом в правильном направлении.

Заранее спасибо.


reactjs react-hooks stenciljs
person HeediBoy    schedule 22.04.2020    source источник
comment
Я почти уверен, что React не поддерживает настраиваемые события, поэтому вам, вероятно, придется использовать componentDidMount и componentWillUnmount для присоединения обычных прослушивателей событий к DOM.   -  person Simon Hänisch    schedule 22.04.2020
comment
Я понимаю, однако я пытаюсь создать прослушиватели событий с помощью хуков useRef () и useEffect () в React.   -  person HeediBoy    schedule 22.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

Мне удалось решить эту проблему для моего функционального компонента с помощью хуков useRef () и useEffect () React под руководством эта статья, как показано ниже:

import React, { useState, useRef, useEffect } from "react";

const Form = () => {
    const [ name, setName ] = useState('');
    const nameInputField = useRef(null);

    useEffect(() => {
        const { current } = nameInputField;

        //First parameter is the name of the event in Stencil component
        //Second parameter is the custom function
        current.addEventListener('onChanged', () => setName('Steph'););

        //Component is unmounting so removing the event listener
        return () => current.removeEventListener('onChanged', () => setName('Steph'););
    }, []);

    return (
        <stencil-component-with-event 
            ref={nameInputField} 
            value={name} 
            type='text' 
        />
    )
}

Я надеюсь это имеет смысл:)

person HeediBoy    schedule 22.04.2020
comment
Да, это имеет смысл (я предполагаю, что это функциональный эквивалент использования хуков жизненного цикла), но вы не можете удалить прослушиватель событий таким образом ... две функции не равны только потому, что они имеют одинаковую реализацию. Вам нужно будет где-нибудь сохранить ссылку на вашу функцию. - person Simon Hänisch; 23.04.2020
comment
как обрабатывать, если есть несколько компонентов трафарета с событиями внутри рендера @HeediBoy - person Vishnu Shenoy; 08.02.2021
comment
@VishnuShenoy вам нужно будет создать ссылку для каждого из этих компонентов, используя ловушку useRef React в функциональном компоненте. В приведенном выше примере я создал ссылку nameInputField и прикрепил ссылку к компоненту Stencil. - person HeediBoy; 10.02.2021