Meteor：使用反应类中的方法

Question

在meteor中，如何在react类中使用方法？

我想用一个按键在一个反应​​类中触发一个方法，但似乎无法用class.method（）访问它

在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;

在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
    }
  });
});

任何帮助是极大的赞赏。 谢谢

Answer 1

首先 ，这是React - 如果您发现自己使用jQuery，那么您可能做错了。

第二 ，（这可能只是我的意见），但你应该始终保持所涉及包含在组件中的一个组件的东西。 它更清洁，你不必全面了解你的应用程序只是为了弄清楚按键发生的位置。 它应该尽可能接近使用它的代码或尽可能地显示它。

第三 ，您需要知道何时安装了组件，以及何时该组件不在屏幕上。 也许你的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;

1. 添加ReactJS Lifecycle Functions
2. 添加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的设计非常好，通常，有很好的设计决策可以解释为什么React会以它的方式工作。 所以，如果你需要稍微使用jQuery，当你还在学习React时， 那没关系 （我也做了几天嘘......不要告诉任何人 ）。 但是，我认为从长远来看，你会发现，当你正确使用React时，你真的不需要jQuery。

另一件事。 StackOverflow很棒，但有时其他场地更适合某些类型的问题和建议。 真正帮助过我的两个社区是流星论坛和React Chatroom 。 两个社区都非常友好。 如果你去Reactiflux帮助频道，请向我说Acemarke（他基本上住在那里） - 起初，我认真地认为他是某种人工智能，Facebook设计来回答有关React的问题（我不是在开玩笑，我实际上想了一会儿，直到他引人注目的友好幽默踢出来）。

另外，作为样式注释（这完全是意见） - 停止使用分号。 现在没关系 。 如果你停止使用它们，你实际上必须做出更少的决定。 尝试一个星期，你会看到光。