React: IME構成が終了する前に、変更イベントが余分に発生します

cc @salier :) –ここで何をすべきですか？

IME文字列がコミットされるまでonChangeを起動するべきではないと思います。

ChangeEventPluginこれを処理する1つの方法は、 compositionstartとcompositionend間のすべてのinputイベントを無視し、すぐにinputイベントを使用することです。次のcompositionend 。

SimplifiedPinyinと2-SetKoreanを使用してOSXChromeとFirefoxで簡単なテストを行いましたが、イベントの順序とデータは十分に正しいようです。 （IE韓国語で問題が発生すると予測していますが、幸運になるかもしれません。）

Google Input Tools拡張機能などの代替入力方法で引き続き問題が発生する可能性があると思いますが、回避策がある可能性があります。

これは、ラテン語の弁証法文字の入力方法にも影響します。 eを長押ししてからバリアントを使用することでさえ、ここでは失敗しています。

申し訳ありませんが、これは関係がないようです。 謝罪いたします。

更新はありますか？ この問題にも苦しんでいます。

現在はありません–これは現時点では優先度が高くありません。 誰かがこれを修正することに飛び込んだら、プルリクエストを見て喜んでいます。

@salier IEはcompositionend後にinputイベントを発生させないようです。 IE11とWindows10のEdgeでテストしました。ChromeとFirefoxで正しく起動します。

すなわち9では、漢字を再度入力すると、Changeイベントが何度も発生します

こんにちは、Facebookの人は、実際にはこの問題は深刻な問題が発生します。我々は中国の入力と非同期入力を更新することはできません。
たとえば、すべてのフィードバックが非同期で更新されるため、流星反応データソースやreduxのようなストアを使用することはできません。
この問題を示す最も簡単な例を次に示します。setTimeoutを使用して非同期更新を実行します。
https://jsfiddle.net/liyatang/bq6oss6z/1/

これを迅速に修正して、何度も何度も回避するための努力を無駄にしないようにしてください。

ありがとう。

これが私の回避策です。 誰かが同じ問題に直面しているなら、あなたは見ることができます

compositionstart compositionendイベントとonchangeイベントの問題で中国語のIMEが入力されないようにする方法をデモする簡単な例を作成しました。
リンクは次のとおりです： https ：

@eyesofkids素晴らしい仕事、これは入力、textarea ...のonChangeのデフォルト実装として作成できます。

よくやった ！

私は同じ問題にぶつかっていました、そして@eyesofkidsの回避策は完全に機能します（ありがとう！）。

回避策を講じた後、私はReactのソースコードに飛び込んで、少なくともこれに対する失敗したテストを追加しようとしました。後でライブラリに期待される動作を追加したいと思っていましたが、内部に不慣れな人にとっては少し複雑に思えます。

当初、 ChangeEventPluginすでに利用可能なものと同様のテストが機能することを期待していました。つまり、ネイティブのcompositionStart / compositionUpdateをシミュレートし、 onChangeコールバックがないことを確認しました。解雇された; また、 onChangeチェックは、 compositionEndがシミュレートされた場合にのみ発生します。 ただし、これは機能していないようです。

したがって、 ChangeEventPlugin.extractEvents()をチェックすることは、 SelectEventPluginテストで行われるのと同様に、実行可能なアプローチになると考えていました。 ここでは、何らかの理由で、イベントを抽出するときに常にundefined取得します。
参考までに、これは_ChangeEventPlugin-test.js_内で試したテストコードです。

  var EventConstants = require('EventConstants');
  var ReactDOMComponentTree = require('ReactDOMComponentTree');
  var topLevelTypes = EventConstants.topLevelTypes;

  function extract(node, topLevelEvent) {
    return ChangeEventPlugin.extractEvents(
      topLevelEvent,
      ReactDOMComponentTree.getInstanceFromNode(node),
      {target: node},
      node
    );
  }

  function cb(e) {
    expect(e.type).toBe('change');
  }
  var input = ReactTestUtils.renderIntoDocument(
    <input onChange={cb} value='foo' />
  );

  ReactTestUtils.SimulateNative.compositionStart(input);

  var change = extract(input, topLevelTypes.topChange);
  expect(change).toBe(null);

これらのテストをどのようにデバッグするのか正確にはわからないのではないかと思います。そうしないと、何が起こっているのかをより明確に把握できます。 進め方やその他の指針についてのガイダンスをいただければ幸いです。

Chrome 53+で回避策が突然壊れ、 compositionendが起動される順序が変更されたため、無効になっているようです。以前textInput前に発生していましたが、現在はtextInputます。 この結果、コンポジション中にchangeが中止されても、

https://github.com/suhaotian/react-input多分誰かを助ける

Chromev53にはトリッキーなソリューションがあります。 compositionendが発生した後にhandlechangeを呼び出すため。

handleComposition  = (event) => {

    if(event.type === 'compositionend'){
      onComposition = false

      //fire change method to update for Chrome v53
      this.handleChange(event)

    } else{
      onComposition = true
    }
  }

ここでデモを確認してください： https ：

@chenxsanあなたは解決策を見つけましたか？
CompositionStartを検出し、変数をtrueに等しくすることができます。
次に、onChangeで設定した変数を使用して、クエリを実行する必要があるかどうかを確認します

＃8683で制御コンポーネントの新しい問題を

制御されていないコンポーネントと制御されているコンポーネント（input、textarea）の一時的なソリューションは、 react-compositioneventにアップロードされます。

https://github.com/facebook/react/pull/8438を実現させましょう。

@yesmeckはこのニュースを見てとても幸せです。

テストはWebkitのみに焦点を当てているのを見ましたが、Chromeは53+以降にcompositionendイベントトリガーの順序を変更するため、ChromeとSafariに分ける必要があります。

@ eyesofkids53歳未満のChromeの新しいテストケースを追加しました。

火に燃料を追加するために、私はこの問題を回避しようとしましたが、現在のバージョンのiOSサファリが日本のひらがなIMEを使用しているときにcompositionendイベントをトリガーしないことを発見しました。これは意図的なものだと思います。作曲メニューが閉じられていないようです。
@eyesofkidsの例では、inputValueが更新されることはありませんが、私にとってはhttps://github.com/zhaoyao91/react-optimistic-inputで日本のIMEの問題が修正されてい

これに対する解決策を探している人のために、すぐに使用できるコンポーネントがあります。 https://github.com/aprilandjan/react-starter/blob/test/search-input/src/components/SearchInput.js通常のテキスト入力要素の代わりに使用するだけで、すべて問題ありません。

@ zhaoyao91あなたの回避策はうまくいきます！ ありがとう。

やあみんなこの問題のいくつかのニュース？

onChangeの起動が頻繁に発生しても問題が発生することはめったにないため、優先度は高くありません。 アプリのどこで問題が発生していますか？

@sophiebits申し訳ありませんが誤って「X」をクリックしました。 これにより、変更イベントハンドラーで使用されるフィルタリング操作またはサーバーコールバックがある場合、パフォーマンスが低下する可能性があります。 https://github.com/facebook/react/issues/3926#issuecomment -316049951に示されているアプローチは、制御されていない入力またはネイティブ入力に対する優れた回避策ですが、Reactで制御された入力に適切にマッピングされません。 このスレッドの一部がPRを開発しようとしたが、内部が少し複雑であることがわかったようですが、チームのエンジニアがより迅速に作業できるのではないでしょうか。 https://github.com/facebook/react/issues/8683は、実際の問題IMOのはるかに優れた説明です。

誰かが私が理解するのを手伝ってくれませんか：問題は厳密に途中の余分なonChange呼び出しにありますか？ それとも、最終的に間違った値を取得しますか？

onChangeが呼び出された回数に関するアサーションを削除すると、 https：//github.com/facebook/react/pull/8438での修正試行のテストに合格しonChange呼び出しに関するものだと思います。

余分なonChange呼び出しはありません。最後に誤った値を取得しているだけで、onCompositionの問題のようです。

@crochefluidこれに対して失敗するテストを作成できますか？ ＃8438がやろうとしたことと似ています。 そのテストでは、誤った値はありませんでした。

@gaearonやってみます。 サファリ（mac / IOS）でそのテストを試しましたか？

これはノードテストですが、さまざまなブラウザやデバイスからキャプチャされたシーケンスをエンコードします。 そのソースを参照してください。 失敗しているシーケンスを追加する必要があります。

したがって、この問題は追加のonChange呼び出しに関するものだと思います。

丁度。

私はまだこの問題を抱えています。 この問題は3年間開いているようですが、Reactは現在、制御されたコンポーネントでの中国語入力をサポートしていますか？

これも日本語で特定の文字で見ています...

これが私の問題を再現するコードサンドボックスです。 フォームに関連しているようです。 入力を直接使用することは問題ありません。

https://codesandbox.io/s/0m1760xqnl

私はいくつかのケースを追加しました：
反応状態とプレーン入力の使用は問題ありません
反応状態、プレーンフォーム、プレーン入力の使用は問題ありません
動作していないコンテキストベースのフォームコンポーネントを使用しています。 コンテキスト関連の問題である可能性があります。

問題は解決しました：codepenで動作させました。 何らかの理由で、（props）=>を渡すときに、コンポーネントとして「input」を渡すことが機能しましたしなかった。

誰もが違いが何であるかについての考えを持っていますか？

実際、私も試しました：

作品

<Field {...otherProps} component="input" />

動作しません

<Field {...otherProps} component={(props) => <input {...props} />} />

奇妙なことに十分に機能します

const WrappedInput = (props) => <input {...props} />
...
<Field {...otherProps} component={WrappedInput} />

明らかに、私が理解していない魔法がここで起こっています。 😕

更新はありますか？

IMEを有効にすると、誤った結果が発生するようです

@otakustayと同じ問題が発生しました
IME入力で制御された入力をサポートすることは不可能のようです。 イベントのシーケンスを次のように追跡しました。

1. ユーザーが文字を入力します。たとえば、 w
2. onChangeがトリガーされます
3. 状態が新しい値で更新されます
4. 新しい値は、 value属性を介してinput伝播されます。
5. IMEの「構成」はこの時点で中断されます
   
   
   
   • 入力要素にw文字列があります
   
   
   • IMEバッファに格納されている個別のw文字列もあります
   
   
6. ユーザーが別の文字を入力します。たとえば、 a
7. 入力aの文字列は、IMEバッファの文字列と結合して、 wwaを生成します。
8. 手順1〜7を繰り返して、重複する文字の束を取得します。

バグは、次の再描画後のcompositionUpdateイベントの15ms以上後に入力が再レンダリングされた場合にのみ発生することに気づきました。

今のところ、私の唯一の解決策は、制御された入力から切り替えることです。

編集：これは単純な複製です： https ：
Edit2 ：これが私のハッキーな回避策です： https ： //jsfiddle.net/m792qtys/ cc：

これに関する更新はありますか？

更新??

これに関する更新はありますか？

唖然としました、私はこの質問に直面しました

興味深いことに、問題は複数回のonChangeだけではないようです。 onCompositionStartとonCompositionEnd間にsetStateがない場合、reactは値をそのまま「制御」します。 このアクションにより、構成が中断されます。 つまり、 onCompositionEndイベントが発生しないことを意味します......（間違っている場合はplzと言ってください）しかし、状態をすぐに変更することしかできません（そうでない場合は、問題に直面する必要があります@ knubieの言及）。 ここでの複製（「半分制御された」コンポーネントのように見えます）： https ：

しかし、私はこの問題が5年間修正されないことにとても驚いています😢

@hellendag IME文字列がコミットされるまで、onChangeを起動するべきではないと思います。

コンポーネントが「コミットされていない」IME文字列を知りたい場合があるため、これは有効な解決策ではないと思います。たとえば、ユーザーが入力するときにリスト内のオプションをフィルタリングします。

この他のスレッドで使用しているアプローチがこの問題にぶつかる人に役立つかどうかはわかりませんが、念のためにリンクを示します： //github.com/facebook/react/issues/13104#issuecomment -691393940

更新はありますか？