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直到后来某个人已经登录了＃34;之后才会变得相关。或者其他的东西。所以你的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;

添加ReactJS Lifecycle Functions
添加constructor以修复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时，那没关系（我也做了几天 shhh。 ..不要告诉任何人）。但是，我认为从长远来看，你会发现，当你正确使用React时，你真的不需要jQuery。

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

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

Meteor：使用反应类中的方法

1 个答案:

以您的代码为例：