从Electron的globalShortcut调用React组件中的方法

时间:2018-05-08 03:47:33

标签: javascript reactjs electron

我有一个带有方法的React组件:

time = 4.41343

我想能够在用户按下组合键时调用方法start()。 在我的main.js文件中,我有:

ArrayList<Integer> numList = new ArrayList<Integer>();
//Add 1-6
for(int i = 1;i < 7;i++){
    numList.Add(i);
}
Die dice = new Die();
While(numList.size() != 0){
   int rolled = dice.roll();
   ArrayList.remove(rolled);
}

我怎样才能做到这一点?我在这个问题上找不到太多的信息。

2 个答案:

答案 0 :(得分:0)

我希望有电子专家经验的人会解决这个问题,但现在已经整整一天了。

要跨越外部世界/ React组件障碍,您最好使用自定义事件。为此,您需要访问由React创建的DOM元素以响应您的render调用,然后直接在元素上侦听您的自定义事件。这是一个示例,请参阅注释以获取详细信息。请注意,在此示例中,我将对象作为事件详细信息传递;这只是为了表明你可以做到这一点(不只是简单的字符串),但你可以改为{detail: "Tick #" + ticker}而直接使用event.detail作为消息。

class Example extends React.Component {
  // Normal component setup
  constructor(...args) {
    super(...args);
    this.state = {message: ""};

    // Our event handler. (We could also define this at the class level using the class
    // fields syntax that's currently at Stage 3 in the ECMA TC39 process; most React
    // setups with JSX transpile class fields syntax.)
    this.doSomething = event => {
      this.setState({message: event.detail.message || ""});
    };
  }

  // Render with a way of finding the element in the DOM from outside (in this case
  // I'm using a class, but it could be an ID, or just knowing where it is in the DOM).
  // We use a ref so we can hook the event when the elemet is created.
  render() {
    return <div className="foo" ref={element => this.element = element}>{this.state.message}</div>;
  }

  // Hook the event on mount, unhook it on unmount
  componentDidMount() {
    this.element.addEventListener("my-event", this.doSomething);
  }
  componentWillUnmount() {
    this.element.removeEventListener("my-event", this.doSomething);
  }
}

// Top-level app rendering
ReactDOM.render(<Example />, document.getElementById("root"));

// Demonstrate triggering the event, in our case we do it every half-second or so
let ticker = 0;
setInterval(() => {
  const foo = document.querySelector("#root .foo");
  ++ticker;
  foo.dispatchEvent(new CustomEvent("my-event", {detail: {message: "Tick #" + ticker}}));
}, 500);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

答案 1 :(得分:0)

当需要在反应堆内部使用电子库时,应使用电子遥控导入

const { globalShortcut } = require('electron').remote;

class Timer extends Component{
     componentDidMount = () => {

    globalShortcut.register('Cmd+Alt+K', () => {
      //your call
      this.start()
    });
}

  start(){
    this.timerInterval=setInterval(this.tick,1000);
  }

  [...]
}