textareaのサイズ変更に関するモバイルブラウザーの問題
私はReact.jsで作業しており、ユーザーの入力のサイズに基づいて動的に拡大および縮小するtextarea要素があります。目的の機能は次のとおりです。
これはデスクトップのコンテキストで正しく動作します。ただし、最新のブラウザー（テスト済みのSafari、ChromeおよびFirefox））のすべてのモバイルまたはタブレットでは、textarea要素のみが展開され、コンテンツが削除されても縮小されません。
最初は、私が使用していたonChangeハンドラーと関係があるのではないかと思いましたが、onInputハンドラーと入れ替えても同じ問題が残ります。したがって、問題はresize()メソッドにあると考えています。
誰かがこの問題が発生している理由を知っていますか？
基本的な機能を共有するためのスタイルフリーのフィドルを作成しました。興味深いことに、このバグはモバイルデバイスのJSFiddleシミュレータでは発生しませんが、同じコードを取得して別の反応環境に配置すると、最新のブラウザのモバイルデバイスでバグが発生します。
https://jsfiddle.net/o4aLfd21/6/
事前にTHX
問題は、状態を変更してReactが適切に流れるようにすることではなく、直接DOMを変更しようとしていることです。resize()でDOM要素のプロパティを変更します。入力が変更されるとすぐにhandleChange(e)が呼び出され、DOMがリフローされて変更が上書きされます。
DOM TOUCHINGと反応しないでください!!!
resize関数を変更してhandleChange(e)関数のように動作させ、マークアップのrender()中にこれらのプロパティを制御する状態内の変数を設定します。