ReactJS入力フィールドにエンドユーザーとして入力する

Question

JavaScriptを使用して、ReactJSフォームの入力フィールドにエンドユーザーの視点からデータを入力するにはどうすればよいですか？ Reactが入力を正常に更新するときに聴くイベントの特定のシーケンスがありますか？

これは可能ですが、1Passwordのようなユーティリティは、格納されたIDを接続して、明らかにキーボードイベントの組み合わせを使用するとうまくいくので、これは可能です。私はそこで答えを見つけようとしましたが、数百種類のサイトの入力タイプとエッジケースの大部分を処理するため、その縮小されたJSコードは理解しにくいです。

Answer 1

テキストボックス要素を更新するには：

は、あなたの要素がboxで選択されていると仮定すると（溶液がフォーカスイベントを発生するようです：

var event = document.createEvent('FocusEvent'); 
    event.initEvent('focus', true, true); 
    box.dispatchEvent(event); 

次に、あなたがしたい各文字を反復処理"textInput"イベントを発生させます。この場合、文字は "3"です：

var event = document.createEvent('TextEvent'); 
    event.initTextEvent('textInput', true, true, window, "3"); 
    box.dispatchEvent(event); 

var event = document.createEvent('FocusEvent'); 
    event.initEvent('blur', true, true); 
    box.dispatchEvent(event); 

ドロップダウン要素更新するには：任意のUIの更新は、あなたがそのボックスで行われているに依存念のために、その後曖昧に再 を（要素が「選択」である場合）

select.value = "the option value" 
    var event = document.createEvent('Event'); 
    event.initEvent('input', true, true) 
    select.dispatchEvent(event) 

    var event = document.createEvent('Event'); 
    event.initEvent('change', true, true) 
    select.dispatchEvent(event)