React js：テキストを編集するときに入力要素の終わりに常にマウスカーソルがあります

Question

Reactアプリケーションでinput要素を使用しています。このアプリではFluxアーキテクチャを使用しようとしています。だから、私は入力を変更すると、私はすぐにハンドラのStoreにテキストを同期させます。その後Storeは、アプリケーション自体であるサブスクライバにイベントをトリガーし、Storeからデータをプルします。私はここでは、イベントメカニズムを達成するためにPub-sub jsを使用

は私のコードです：

var MyStore = function MyStore() { 
    var _this = this; 

    this.update = function (name, value) { 
     _this.info[name] = value; 
     PubSub.publish('STORE_UPDATE'); 
    }; 

    this.set = function (obj) { 
     _this.info = obj; 
    }; 

    this.get = function() { 
     return _this.info; 
    }; 

    this.info = null; 
}; 

var myStore = new MyStore(); 

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      info: { 
       width: '1230000' 
      } 
     } 

     myStore.set({ 
      width: '1230000' 
     }) 

     PubSub.subscribe('STORE_UPDATE',() => { 
      this.setState({ 
       info: myStore.get() 
      }) 
     }) 

    } 
    onChange (e) { 
     myStore.update('width', e.target.value); 
    } 
    render() { 
     return (
      <div className="ui form"> 
       <input value={this.state.info.width} onChange={this.onChange} /> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
); 

そして、ここでは、私はこれがなぜ起こったかを知りたい、そしてどのように私はこの問題を解決することができますDemo on fiddle

です。

ありがとうございます。

Answer 1

私はそれが遅すぎると思いますが、このバグは反応の非同期アップデートバグに関連しています。 （Chromeでのみ発生します）。 私が見つけることができる汚れた修正は、ストアに発送する前にコンポーネントの状態を設定することです。 https://jsfiddle.net/69z2wepo/68244/

onChange (e) { 
    this.setState({info: { 
    width: e.target.value 
    }}); 
    myStore.update('width', e.target.value); 
}