Как использовать EventEmitter Stencil внутри React JSX? - PullRequest
Новая
       71

Как использовать EventEmitter Stencil внутри React JSX?

2 голосов
/ 19 февраля 2020

Я создал веб-компонент Input с помощью 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 использует событие syntheti c вместо событий Dom.

Есть ли способ использовать события Dom в элементе JSX?

1 Ответ

0 голосов
/ 20 февраля 2020

Вы должны вручную подключить прослушиватель событий, используя DOM API, например: 

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

(Вы также можете использовать опору ref, чтобы получить ссылку на элемент DOM, который, вероятно, более надежный.)

У вас есть еще один вариант, и он должен использовать stencil-ds-plugins , в частности пакет @stencil/react-output-target npm. Когда вы создаете свой компонент / библиотеку, выходная цель сгенерирует все необходимые привязки (реквизиты, пользовательские события и т. Д. c.), И вы сможете использовать свой компонент в качестве компонента реакции. На данный момент в файле readme доступны только документы: https://github.com/ionic-team/stencil-ds-plugins#react.

...