Reactjs 如何在rxjs中将typescript中的目标设置为fromEvent（）

我正在使用“”库和typescript。 问题是，我不知道如何将一个简单按钮传递到rxjs

尝试此操作会使编译器抱怨：

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;

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

---

知道我做错了什么吗？

您可能可以使用

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;

从“React”导入React；
从“rxjs”导入*作为rx；
常量RX组件：React.FC=（）=>{
常量buttonHandler=（buttonRef）=>rx.fromEvent（buttonRef，‘单击’）
返回(
)
}
导出默认RX组件；

我遇到了同样的问题，您只需要显式强制（或强制转换）类型，因此我为此制作了一个小助手

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"))

从“rxjs”导入*作为Rx
从'rxjs/internal/observable/fromEvent'导入{FromEventTarget}
常数
mkEventTarget=（qs:string）：FromEventTarget=>
document.querySelector（qs）作为FromEventTarget
，evClicks:Rx.Observable=Rx.fromEvent（mkEventTarget（“#btn”），“click”）
evClicks.subscribe（（）=>console.log（“测试”））

此外，您可能希望在componentDidMount（）上获取此元素，因为它以前不存在

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"))