アクセントと遅延リアクションの入力onChange

Question

私はsetStateを入力のonChangeハンドラで次のダニに延期する必要がある小さなユーティリティを作成しています。基本的なコンセプトを示す簡単なスニペットの下に。

https://jsfiddle.net/samuelsimoes/q3p44sz1/

class MyComponent extends React.Component { 
    constructor() { 
    super(...arguments); 
    this.state = {}; 
    } 

    onChange (value) { 
    setTimeout(v => { 
     this.setState({ name: v }); 
    }.bind(this, value), 0); 
    } 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      value={this.state.name} 
      onChange={evt => this.onChange(evt.target.value)} /> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(
    <MyComponent/>, 
    document.getElementById("app-container") 
); 

あなたは、Mac OS上のブラウザでこのスニペットを実行し、各ブラウザ上で異なるぎこちない動作を取得アクセントでいくつかの文字を入力しようとします。 Chromeでは、アクセントがもう適用されなくなった後で初めてアクセントが動作します（下のgifを見てください）。 Firefoxでは、アクセントと文字は表示されません。

君たちはこれについてどの手掛かりを持っていますか？

p.s .:この反応は、0.13,0.14および15.0.2の反応で試験した。

Answer 1

基本的にsetStateを延期しないでください。このような状況では、リアクションは正しく機能しません。

ルック：https://github.com/facebook/react/issues/6563

何が起こっている：

のは、あなたが手紙Aを押すと仮定しましょう。

1. あなたがフィールドにonChangeをトリガーすると、プロセスはすべての状態変異が反応します。

2. ReactはDOM diffを実行してコンポーネントを更新します。この段階では、このフィールドの状態値は空の値なので、Reactはnode.value = ""を実行します。

3. setStateが遅れて、Aにnode.value = "A"という文字が適用されます。

この動作は、彼らが強調文字を入力するようにユーザーを防止型付きアクセントに「中間状態」にアクセントを交換MacOSでのブラウザを破ります。

悲しいことに、解決策はありません。