Как установить цель в машинописи для fromEvent () в rxjs - PullRequest
Новая
       17

Как установить цель в машинописи для fromEvent () в rxjs

0 голосов
/ 30 сентября 2019

Я использую библиотеку 'rxjs' вместе с машинописью. Проблема в том, что я не могу понять, как передать простую кнопку в fromEvent() из 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;

Выдает следующее исключение:

Аргумент типа 'HTMLElement |null 'нельзя назначить параметру типа' FromEventTarget '. Тип 'null' нельзя назначить типу 'FromEventTarget'. TS2345

enter image description here

Я попытался изменить определение на список узлов согласно документации:

Списокузлов 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, я просто получу кучуошибки при ссылке на библиотеку.

enter image description here

Есть идеи, что я делаю не так?

1 Ответ

0 голосов
/ 30 сентября 2019

Возможно, вы могли бы сделать что-то подобное, используя шаблон обратного вызова 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;
...