onChange不会触发延迟状态更改和后来添加的组件ReactMeteor。

Question

一个非常基本和标准的组件，当输入发生变化时，应该调用更改处理程序。它在我的笔里工作：http://codepen.io/sdbondi/pen/MaGovq

实际上，在我的流星应用程序中，如果在初始页面加载后呈现-{ (this.state.cond)？<Element onChange={..}/>：‘}也会呈现，但不会触发更改，则任何处理程序(this.state.cond等)都不能工作。

有趣的是，如果我将条目设置为初始状态，则会发生更改，但是使用setTimeout，它们只呈现而不呈现onChange。

我已经通过了一步反应来尝试和理解事件是如何绑定的(实际上我最终得到了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>
    );
  }
});

反应: 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响应来做这个混合的：

​

    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() { ... }  
    });

​