如何在 React JSX 中使用 Stencil 的“EventEmitter”？

Question

我使用 Stencil 创建了一个输入网络组件：

...
export class Input {
    @Prop({ mutable: true }) value: string;
    @Event() changed: EventEmitter<KeyboardEvent>;

    private handleChange (e) {
        this.value = e.target?.value;
        this.changed.emit(e);
    }

    render() {
        return (
            <div class="inputContainer">
                <input  
                    type="text"
                    value={this.value}
                    onInput={this.handleChange}
                />
            </div>
        )
    }
}

然后在 React jsx 文件中尝试使用它之后，onChanged 不调用 console.log

...

function App() {
  return (
    <div className="App">
      // does not call console.log
      <ui-input onChanged={(e) => console.log(e)}/>
    </div>
  );
}

据我所知，这是因为 React 使用合成事件而不是 Dom 事件。

有什么方法可以在 JSX 元素中使用 Dom 事件吗？

Answer 1

您必须使用 DOM API 手动附加事件侦听器，例如：

document.querySelector('ui-input').addEventListener('changed', console.log)

（您还可以使用 ref 属性获取对 DOM 元素的引用，这可能更可靠。）

相关文档部分：https://stenciljs.com/docs/react#properties-and-events
相关 Github 问题：https://github.com/facebook/react/issues/7901

不过您还有另一种选择，那就是使用 stencil-ds-plugins, specifically the @stencil/react-output-target npm package. When you build your component/library, the output target will generate all the necessary bindings (props, custom events, etc.) for you, and you'll be able to use your component as a react component. The only available docs so far ar in the readme: https://github.com/ionic-team/stencil-ds-plugins#react。

如何在 React JSX 中使用 Stencil 的“EventEmitter”？

How to use Stencil's `EventEmitter` inside React JSX?

reactjs

web-component

eventemitter

stenciljs