Meteor: Using Methods from Response Classes

Question

In meteor, how can I use a method inside a reaction class?

I want to call a method inside a reaction class with a keystroke, but can not seem to have access to it with the .method () class

In toolbar.js:

import React, { Component } from 'react';

class Toolbar extends Component {
  addSection(){
    alert("add section");
  };
  render(){
    return (
      <div className="toolbar">
        <button onClick={this.addSection.bind(this)}>add section</button>
      </div>
    );
  }
}

export default Toolbar;

In main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Toolbar from './components/toolbar';

const App = () => {
  return (
    <div>
        <Toolbar />
    </div>
  );
};

Meteor.startup(() => {
  ReactDOM.render(<App />, document.querySelector('.container'));
  $(document).on('keyup', function(e) {
    if (e.ctrlKey && e.keyCode == 49) { // ctrl+1
      Toolbar.addSection(); //errormsg: toolbar.addsection is not a function
    }
  });
});

Any help is appreciated. Thanks you

Answer 1

First one . This is React - if you ever find yourself using jQuery, you are probably wrong.

( ), , , . , , , . .

. , , . , ctrl + 1 , - - . eventListener , .

class Application extends React.Component {
  constructor(props) {
    super(props)

    this.addSection     = this.addSection.bind(this)     // This is not "needed" - but I'm doing it anyways because I can.
    this.keydownHandler = this.keydownHandler.bind(this) // See comment from @dfsq
  }

  componentDidMount() {
    document.addEventListener('keydown', this.keydownHandler)
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.keydownHandler)
  }

  addSection() {
    alert("add section")
  }

  keydownHandler(event) {
    if(event.keyCode===49 && event.ctrlKey)
      this.addSection()
  }

  render() {
    return (
      <div>
        <p>Press Ctrl+1</p>
      </div>
    )
  }
}

CodePen.

---

:

toolbar.js:

import React, { Component } from 'react';

class Toolbar extends Component {
  constructor(props) {
    super(props)

    this.addSection     = this.addSection.bind(this)     // This is not "needed" - but I'm doing it anyways because I can.  I think from now on I'm going to bind all of my functions like this.  Any comment on this would be interesting.
    this.keydownHandler = this.keydownHandler.bind(this) // See comment from @dfsq
  }

  componentDidMount() {
    document.addEventListener('keydown', this.keydownHandler)
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.keydownHandler)
  }

  addSection() {
    alert("add section")
  }

  keydownHandler(event) {
    if(event.keyCode===49 && event.ctrlKey)
      this.addSection()
  }

  render(){
    return (
      <div className="toolbar">
        <button onClick={this.addSection.bind(this)}>add section</button>
      </div>
    )
  }
}

export default Toolbar;

• ReactJS Lifecycle Functions
• constructor, React, removeEventListener and bind(this) gotcha...

main.js:

import React from 'react'
import ReactDOM from 'react-dom'
import Toolbar from './components/toolbar'

const App = () => {
  return (
    <div>
        <Toolbar />
    </div>
  )
}

Meteor.startup(() => {
  ReactDOM.render(<App />, document.querySelector('.container'))
})

. , React, jQuery, , , . , , , , , React , . , jQuery, React, ( , shhh... ). , , , jQuery, React.

. StackOverflow , . , Meteor Forums . . - Reactiflux, Acemarke ( ) - , - , Facebook React ( , , ).

, ( ) - . . , . , .