如何在rxjs中将typescript中的target设置为fromEvent()

i7uaboj4 于 2023-11-20 发布在 TypeScript

关注(0)|答案(3)|浏览(180)

我正在使用' rxjs '库和typescript。问题是，我不知道如何从rxjs向fromEvent()传递简单的按钮
这样做会让编译器抱怨：

import React from 'react';
import * as rx from 'rxjs';

const RXComponent: React.FC = () => {

    rx.fromEvent(document.getElementById('dblbutton'), 'click')

    return (
        <form>
            <input type='button' id='dblbutton' value='Click me!'>
            </input>
        </form>
    )
}

export default RXComponent;

字符串
这会引发以下异常：
“HTMLElement”类型的参数|“null”不能分配给类型“FromEventTarget”的参数。“null”类型不能分配给类型“FromEventTarget”。TS2345

的数据
我尝试将定义更改为节点列表，如文档所示：
DOM节点列表，例如由document.querySelectorAll或Node.childNodes返回。
虽然这个集合本身不是事件目标，但fromEvent会覆盖它包含的所有节点，并在每个节点中安装事件处理函数。当返回的Observable被取消订阅时，函数将从所有节点中删除。

const btn = document.querySelectorAll('#dblbutton')
const obs = rx.fromEvent(btn, 'click')
obs.subscribe(x => console.log(x))

型
这在技术上是可行的，并阻止编译器抱怨，但如果我在localhost上打开实际的网站，我只是得到一堆引用库的错误。

的
知道我哪里做错了吗

typescript

来源：https://stackoverflow.com/questions/58172960/how-to-set-target-in-typescript-to-fromevent-in-rxjs

3条答案

按热度按时间

prdp8dxp1#

我也遇到了同样的问题，你只需要显式地强制（或强制转换）类型，所以我为此做了一个小助手

import * as Rx from 'rxjs'
import { FromEventTarget } from 'rxjs/internal/observable/fromEvent'

const
    mkEventTarget = (qs: string): FromEventTarget<Event> =>
        document.querySelector (qs) as FromEventTarget<Event>

  , evClicks: Rx.Observable<Event> = Rx.fromEvent (mkEventTarget ("#btn"), "click")

evClicks.subscribe (() => console.log ("Test"))

字符串

赞(0）回复(0）举报 2023-11-20

b09cbbtk2#

你可以使用refs回调模式来做类似的事情，它会传递给你实际的元素引用，看看是否适合你：

import React from 'react';
import * as rx from 'rxjs';

const RXComponent: React.FC = () => {
    const buttonHandler = (buttonRef) => rx.fromEvent(buttonRef, 'click')

    return (
        <form>
            <input
               type='button'
               id='dblbutton'
               value='Click me!'
               ref={buttonHandler}>
            </input>
        </form>
    )
}

export default RXComponent;

字符串

赞(0）回复(0）举报 2023-11-20

nzrxty8p3#

为了避免每次使用TypeScript访问RxJS中的事件目标时都必须使用像event.target as HTMLInputElement这样的类型Assert，您可以创建一个更具体的事件流，自动将每个事件视为具有HTMLInputElement作为其目标。这种方法涉及为事件处理程序定义自定义类型，然后在fromEvent调用中使用该类型。
下面是一个示例，说明如何执行此操作：

import { fromEvent } from 'rxjs';

const inputElement = <HTMLInputElement>document.getElementById('myInput');

// Define a specific event type
type InputEvent = Event & {
  target: HTMLInputElement;
};

const inputEvent$ = fromEvent<InputEvent>(inputElement, 'input');

inputEvent$.subscribe({
  next: (event) => {
    // Now you can directly use `event.target.value` without additional assertion
    console.log(event.target.value);
  },
  error: (err) => console.error(err),
  complete: () => console.log('Completed'),
});

字符串
在这段代码中，InputEvent是一个扩展了标准Event类型的类型，指定target是一个HTMLInputElement。这允许您在subscribe块中直接使用event.target作为HTMLInputElement，从而消除了重复类型Assert的需要。

赞(0）回复(0）举报 2023-11-20

我来回答

如何在rxjs中将typescript中的target设置为fromEvent()

3条答案

相关问题

热门标签

最新问答