绑定事件发射器上的单个事件

Question

React 组件需要事件来接收来自其他对象的状态更改。为了使组件可重用，我想在组件外部定义触发状态更改的事件 type/name。所以我在考虑绑定事件发射器和事件 type/name 的 class。 React 组件只需要调用.on，没有任何事件type/name。将更多事件合并为一个也很有意义。我没有在框架中看到这些通用的 classes，所以我不确定是否有其他设计模式，我只是用错误的关键字搜索。

这是处理通用 React 组件事件的正确方法吗？

这里有一个例子，让你有一个更好的主意：

var emitter = {};
_.extend(emitter, Backbone.Events);

var Component = React.createClass({
  getInitialState: function () {
    var self = this;
    self.props.update.on(function (text) {
      self.setState({text: text});
    });
    return {text: ''};
  },
  render: function () {
    return React.DOM.p({}, this.state.text != null ? this.state.text : '');
  }
});*

// this would require to know the event type/name in the component
//var component = React.createFactory(Component)({update: emitter});

var binding = new Event(emitter, 'label:changed');
var component = React.createFactory(Component)({update: binding});

// this would merge multiple events into a single one
/*var binding = Event.merge([
  new Event(emitter, 'label:changed'),
  new Event(emitter, 'label:deleted')]);*/

var component = React.createFactory(Component)({update: binding});

Answer 1

你熟悉吗Flux architecture? It uses event emitters in Stores that a Controller-view可以听听。这是您所描述内容的一个很好的例子。

Controller-view 是一个顶级组件，它侦听新事件，然后通过 props 将数据向下传递到较低级别的组件。

无论您是否实施 Flux，Facebook 在其 Todo List Example.

中都有一些很好的示例可以回答您的问题

绑定事件发射器上的单个事件

Binding for a single event on an event emitter

javascript

events

reactjs