javascript - meteor :使用 react 类中的方法

Question

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

我想通过按键触发 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>
    )
  }
}

Here is a working 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. 添加构造函数以修复React, removeEventListener and bind(this) gotcha ... 这里有一些 more reading on this

在 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 很棒，但有时其他场所更适合某些类型的问题和建议。两个对我真正 帮助的社区是 Meteor Forums还有这个React Chatroom .这两个社区都非常友好。如果你去过 Reactiflux 帮助 channel ，请代我向 Acemarke 打个招呼(他基本上住在那里)——起初，我认真地认为他是 Facebook 设计用来回答有关 React 问题的某种人工智能(我不是在开玩笑，我实际上想了一会儿，直到他显着的友好幽默开始出现)。

此外，作为样式说明(这完全是个人意见)- 停止使用分号。 现在可以了。如果您只是停止使用它们，您实际上必须做出更少的决定。尝试一个星期，您就会看到曙光。