Реакция событий, не работающих внутри Polymer - PullRequest
Новая
       27

Реакция событий, не работающих внутри Polymer

0 голосов
/ 25 июня 2018

Я пытаюсь связать мини-приложение реакции внутри компонента Polymer3. Кажется, что большинство вещей работает до сих пор, за исключением событий React, которые не запускаются.

Полимерный компонент 

import {LitElement, html} from '@polymer/lit-element';
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from '../../components/TodoList/TodoList.component';

import './todo-list.scss';

class TodoListComponent extends LitElement {

static get properties() {
    return {name: String}
};

onClick = (e) => {
    console.log("Clicked Polymer button"); //works
    alert("Clicked!");
};

_render({name}) {
    const mountPoint = document.createElement('div');
    this.shadowRoot.appendChild(mountPoint);
    ReactDOM.render(
        <TodoList name={name} clicked={this.onClick} />,
        mountPoint
    );
    return html`
        <style>

        </style>
        <div class="app">
        <button class="parent-button" on-click="${this.onClick}">Polymer Button</button>
          ${mountPoint}
        </div>
    `;
  }
}

window.customElements.define('todo-list', TodoListComponent);

Реагирующий компонент 

import React from 'react';

class TodoList extends React.Component {

componentDidMount() {
    const btn = document.querySelector('button');
    btn.addEventListener('click', this.props.clicked);
     // btn.click(); //this works but not usefull
}

onClick = (e) => {
    console.log('ClickedReact button'); //not working when you click button :(
};

render() {
    return (
        <div className="sub-app">
            <h3>
                React Zone:
            </h3>
            <button onClick={this.onClick}>React button</button>
        </div>
    )
  }

}

export default TodoList;

Кажется, у React есть свой собственный способ делать события, то есть «синтетические события», которые могут вообще не работать внутри теневого дома? Чего мне не хватает, чтобы сделать эту работу

...