Question

一个非常基本的标准组件，应该在输入更改时调用更改处理程序。它适用于我的笔：http://codepen.io/sdbondi/pen/MaGovq

它不在我的meteor应用程序中 - 实际上任何处理程序（onClick等）在初始页面加载后呈现都不起作用 - {（this.state.cond）？ <Element onChange={..}/>：''}也会渲染，但不会触发更改。

有趣的是，如果我将条目设置为初始状态，则会触发更改，但是使用setTimeout会渲染但不会更改。

我已经逐步做出反应，尝试了解事件是如何绑定的（我实际上最终得到了addEventListener）但是需要一段时间才能理解发生了什么，以便进行调试。

export default React.createClass({
  displayName: 'VotePage',
  getInitialState() {
    return {
      entries: []
    };
  },

  handleChange(e) {
    console.log(e);
  },

  componentDidMount() {
    // this will eventually be replaced by meteor data (ReactMeteor.createClass etc)
    window.setTimeout(() => {
      this.setState({'entries': [{_id: '123', name: 'guyuy'}, {_id:234, name: 'sadfsd'}]});
    }, 1000);
  },

  render() {
    var voteEntries;

    if (this.state.entries && this.state.entries.length) {
      voteEntries = this.state.entries.map((entry) =>
        <input key={entry._id} name="entry" type="text" onChange={this.handleChange} defaultValue={entry.name}  />
      );
    } else {
    voteEntries = 'loading...';
    }

    return (
        <div>
          <h2>Vote</h2>
          <div className="island_-small">
            {voteEntries}
          </div>
        </div>
    );
  }
});

React：v0.13.0（尝试0.13.3）

------------> versions excerpt 
react@0.1.13
react-meteor-data@0.1.9
react-runtime@0.13.3_7
react-runtime-dev@0.13.3_7
react-runtime-prod@0.13.3_6
reactive-dict@1.1.3
reactive-var@1.0.6
reactjs:react@0.2.4
kadira:flow-router@2.7.0
kadira:react-layout@1.4.1


----------> packages full file
meteor-base             # Packages every Meteor app needs to have
mobile-experience       # Packages for a great mobile UX
mongo                   # The database Meteor supports right now
blaze-html-templates    # Compile .html files into Meteor Blaze views
session                 # Client-side reactive dictionary for your app
tracker                 # Meteor's client-side reactive programming library

standard-minifiers      # JS/CSS minifiers run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers.

dburles:collection-helpers
aldeed:collection2
accounts-base
accounts-password
alanning:roles
# twbs:bootstrap
# fortawesome:fontawesome
wylio:mandrill
# kadira:blaze-layout
# sach:flow-db-admin
check


stevezhu:lodash
accounts-facebook
service-configuration
kadira:flow-router
universe:modules-npm
ecmascript
fixate:app-deps
universe:modules
yasaricli:slugify
maxharris9:classnames
reactjs:react
kadira:react-layout
jquery
react-meteor-data
meteorhacks:subs-manager

Answer 1

reactjs:react中有什么东西。见https://github.com/reactjs/react-meteor/issues/105

我根据github上的froatsnooks响应制作了这个mixin：

    export const MeteorReactSubscriber = {
      componentWillMount() {
        this._subsMap = {};
        this.subscriptions();
        this._startMeteorTracker();
      },
    
      _startMeteorTracker() {
        this._subsHandle = Tracker.autorun(() => {
          this.subscriptionReady && this.subscriptionReady();
          if (this.meteorSubsReady()) {
            this.meteorDataReady && this.meteorDataReady();
          }
        });
      },
    
      meteorSubsReady() {
        return _.all(this._subsMap, (s, _) => s.ready());
      },
    
      meteorSubscribe(name, selector=undefined) {
        this._subsMap[name] = Meteor.subscribe(name, selector);
      },
    
      componentWillUnmount() {        
        this._subsHandle.stop();
        this._subsMap = null;
      }
    };

用法

    var SweetComponent = React.createClass({
      mixins: [MeteorReactSubscriber],
      subscriptions() {  
        this.meteorSubscribe('entries');
      },
    meteorDataReady() { 
      var currentEntry = Entry.findOne(this.props.entryId);
      this.setState({entry});
    },
    render() { ... }  
    });

onChange不会因延迟状态更改而激活，之后会添加组件ReactMeteor

1 个答案:

用法