Событие onKeyDown React не запускается в пакете редактора Atom - PullRequest
Новая
       9

Событие onKeyDown React не запускается в пакете редактора Atom

0 голосов
/ 16 октября 2018

Я пытаюсь использовать React для визуализации представления в пакете редактора Atom.Одна проблема у меня заключается в том, что обработчик события onKeyDown в поле ввода никогда не срабатывает.Использование onKeyPress вместо этого работает, но мне нужно, чтобы сработало событие onKeyDown.

Я могу заставить событие ReactDOM onKeyDown работать в приложении React, которое не является частью пакета Atom, и я могу получить событие нажатия клавиши DOMработать в пакете Atom, когда не используется React.По какой-то причине при совместном использовании React и Atom событие onKeyDown не вызывается.

Как получить событие React onKeyDown для запуска в пакете Atom? 

'use babel';

import React from 'react';
import ReactDOM from 'react-dom';

class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  componentDidMount() {
    console.log('componentDidMount');
    this.ref.current.value = 'Enter text';
  }

  render() {

    /* In the following code neither onKeyDown nor onKeyUp generate a console log;
       however, using onKeyPress works correctly */
    return (
      <div>
        <div className="message">
          { 'The KeydownIssueView package is Alive! It\'s ALIVE!' }
        </div>
        <input ref={this.ref}
               type="text"
               id="inputId"
               tabIndex="1"
               className="native-key-bindings"
               onKeyDown={ (e) => console.log('onKeyDown', e.nativeEvent) }
               />
      </div>
    );
  }
}

export default class KeydownIssueView {

  constructor(serializedState) {
    this.element = document.createElement('div');
    this.element.classList.add('keydown-issue');

    /* The following code, when un-commented and used without React, works.

    const message = document.createElement('div');
    message.textContent = 'The KeydownIssue package is Alive! It\'s ALIVE!';
    message.classList.add('message');
    this.element.appendChild(message);

    const input = document.createElement('input');
    input.addEventListener('keydown', (e) => console.log('keydown', e))
    this.element.appendChild(input);

    */

    ReactDOM.render(<Panel />, this.element);
  }

  serialize() {}

  destroy() { this.element.remove(); }

  getElement() { return this.element; }

}

'use babel';

import KeydownIssueView from './keydown-issue-view';
import { CompositeDisposable } from 'atom';

export default {

  keydownIssueView: null,
  panel: null,
  subscriptions: null,

  activate(state) {
    this.keydownIssueView = new KeydownIssueView(state.keydownIssueViewState);

    this.panel = atom.workspace.addBottomPanel({
      item: this.keydownIssueView.getElement(),
      visible: false
    });

    this.subscriptions = new CompositeDisposable();

    this.subscriptions.add(atom.commands.add('atom-workspace', {
      'keydown-issue:toggle': () => this.toggle()
    }));
  },

  deactivate() {
    this.panel.destroy();
    this.subscriptions.dispose();
    this.keydownIssueView.destroy();
  },

  serialize() {
    return {
      keydownIssueViewState: this.keydownIssueView.serialize()
    };
  },

  toggle() {
    return (
      this.panel.isVisible() ?
      this.panel.hide() :
      this.panel.show()
    );
  }

};
...