如何在 React JSX 中使用 Stencil 的“EventEmitter”?
How to use Stencil's `EventEmitter` inside React JSX?
我使用 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 事件吗?
您必须使用 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。
我使用 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 事件吗?
您必须使用 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。