Использование событий из Stencil JS в ReactJS с использованием React Hooks? - PullRequest
Новая
       24

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

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

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

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

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

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

1 Ответ

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

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

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.addAddEventListener('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' />
    )
}

Надеюсь, в этом есть смысл:)

...