フォームバッキング状態オブジェクト

Question

を更新しませんリアクト私は、Instagramのウェブアプリのログインフォームを自動化しようとしています：次のコードで

https://instagram.com/accounts/login/

を（あなたはクロームコンソール上でそれを実行することができます） ：

var frm = window.frames[1].document.forms[0]; 
frm.elements[0].value = 'qacitester'; 
frm.elements[1].value = 'qatester'; 
frm.elements[2].click(); 

私はXHRリクエストを監視する際に入力が移入されていますが、私はこれが掲載されて参照してください。

ユーザ名= &パスワード= &意図=

ではなく、この：

ユーザ名= qacitester &パスワード= =

意図qatester &して認証しないように、Webアプリケーションの原因となります。入力値がReactのバッキング状態（モデル？）オブジェクトに転送されない理由はありますか？

Answer 1

ログインフォームは実際にはiFrameの内部にあるため、作業が少し複雑になります。私は、クロムコンソールから次のコードを実行しているログインを正常に提出できました。私はのリアクトTestUtilsを使用していますが、あなたはAUTOTYPEと細かいことがあります

が反応

// run in Chrome console 
var frame = document.querySelector('iframe[src*="login"]'); 
var s = document.createElement('script'); 
var username = frame.contentDocument.querySelector('input[name="username"]'); 
var password = frame.contentDocument.querySelector('input[name="password"]'); 
s.src = "https://fb.me/react-with-addons-0.12.0.js"; 
frame.contentDocument.body.appendChild(s); 

// wait for the script request to resolve and use: 
change = frame.contentWindow.React.addons.TestUtils.Simulate.change; 
change(username, {target: {value: 'My Great Username'}}); 
change(password, {target: {value: 'securepassword'}}); 

背景には、独自の仮想イベントシステムを使用し、一般的にcontrolled componentsを使用して、基本的に入力valueが設定されていることを意味します反応してDOM要素に流れ落ちる。

リアクションが入力上でキーイベントを探し、イベント時に入力の値を使用してDOM要素の値を設定するため、問題が発生していると考えられます。 DOM要素のvalueプロパティを設定しているだけなので、制御されたコンポーネントサイクルから抜け出しています。

入力にKeyboardEventをディスパッチしようとしましたが、失敗しました。確かに成功すれば、私は自分の答えを更新します。

非満足回避策：フォーム記入を自動化する

使用キャスパー/ phantomjs。つまり、自分でイベントを送信することを心配する必要はなく、単に「ブラウザ」に任せることができます。手動でコンソールで作業するよりも優れています。

Answer 2

InstagramのはReactLinkからlinkState方法使用している：あなたはドキュメントを見れば

o.createElement("input", { 
    className:"lfFieldInput", 
    type:"text", 
    name:"username", 
    maxLength:30, 
    autoCapitalize:!1, 
    autoCorrect:!1, 
    valueLink:this.linkState("username") 
})) 

：

http://facebook.github.io/react/docs/two-way-binding-helpers.html

bundles/Login.jsへのログインページへのリンク、このような圧縮されたコードが含まれていますReactLinkでは、入力フィールドでchangeイベントが発生した場合にのみ、入力フィールド値が状態に戻されることを意味します。しかし、問題のノードで変更イベントを発生させるだけでは簡単ではありません - Reactがブラウザイベントを正常化する方法のためだと思います。アドオンと反応を使用しているあなたのケースのInstagramで幸い

http://facebook.github.io/react/docs/dom-differences.html

あなたが反応するようにアクセスすることができますどの含ま：ザ・は特異的に反応中のonChangeは、様々な理由のために、ブラウザでのonChangeとまったく同じではないことを言うのドキュメントが反応しますTestUtils、あなたが行うことができますので：ここ

var frm = window.frames[1].document.forms[0]; 
var fReact = window.frames[1].React; 
fReact.addons.TestUtils.Simulate.change(frm.elements[0], {target: {value: 'qacitester' }}); 
fReact.addons.TestUtils.Simulate.change(frm.elements[1], {target: {value: 'qatester' }}); 
frm.elements[2].click(); 

その他のドキュメント：

http://facebook.github.io/react/docs/test-utils.html

ログインフォーム自体がiframe内にあるので、はで、そのiframeからのReactのインスタンスを使用する必要があります。そうしないと、TestUtilsはノードを正しく見つけることができません。

は、リアクションアドオンがページに含まれている状況で機能します。 Reactの通常の非アドオンビルドには別の解決策が必要です。しかし、ReactLinkについて具体的に話しているのなら、それはとにかくアドオンだから問題ではありません。自分の質問に答える

Answer 3

、必要なイベントが入力イベントですそれはようで、このコードは動作します：

var doc = window.frames[1].document; 
var frm = doc.forms[0]; 
frm.elements[0].value = 'qacitester'; 
var evt = doc.createEvent('UIEvent'); 
evt.initUIEvent('input', true, false); 
frm.elements[0].dispatchEvent(evt); 
frm.elements[1].value = 'qatester'; 
frm.elements[1].dispatchEvent(evt); 
frm.elements[2].click();