reactjs - 使用 React Hooks 在 ReactJS 中使用来自 StencilJS 的事件？

Question

有没有人设法使用 React useRef() 和 useEffect() 钩子(Hook)在 ReactJS 中使用在 StencilJS 中创建的自定义事件的方法？

我已经为此查看了 StencilJS 文档，它们仅涵盖数组和自定义对象。

我是前端开发的新手，所以任何帮助都是朝着正确方向迈出的一步。

提前致谢。

Answer 1

在 this article 的指导下，我已经设法使用 useRef() 和 useEffect() React 钩子(Hook)为我的功能组件解决了这个问题。 ，如下图所示:

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

我希望这是有道理的:)