使用React Hooks在ReactJS中使用StencilJS中的事件

Question

有没有人找到一种方法，使用React useRef((和useEffect((挂钩在ReactJS中使用在StencilJS中创建的自定义事件？

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

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

提前谢谢。

Answer 1

在本文的指导下，我已经使用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' 
/>
)
}

我希望这是有道理的：(