teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2016/12/10 03:46

投稿

raccy
raccy

スコア21784

answer CHANGED
@@ -2,4 +2,16 @@
2
2
 
3
3
  サイトの構成によりますが、React.jsを用いたページではajax等でバックグラウンドで別データを取得して、それが終わった後にレンダリングなどが簡単にできます。つまり、実際に表示されている部分は後から作られている可能性が高いと言うことです。通常はHTMLを読み込むとDOMの構成が終わり、JavaScriptでDOMの操作が可能になります。user.jsもHTMLの読み込みが終わってから実行されるため、HTML上に記載されたDOMについては問題なく操作できるでしょう。しかし、React.js等を使えば、HTML読み込み完了後に動的にDOMを追加(レンダリング)していくような作りができます。そうなると、user.jsが実行されるときはまだReact.jsで構成される部分のDOMが追加されておらず、取得や変更などができないと推測されます。
4
4
 
5
- React.jsによるレンダリング完了を検知することは難しいと思います。できる対応としては、setTimeout等を用いて、適当な時間で処理を遅らせることぐらいでしょう。
5
+ React.jsによるレンダリング完了を検知することは難しいと思います。できる対応としては、setTimeout等を用いて、適当な時間で処理を遅らせることぐらいでしょう。
6
+
7
+ ---
8
+
9
+ > ・setTimeoutを利用すると値の変更には成功しました。
10
+ > すぐに値は初期値に戻らないのですが、
11
+ > textboxの値を変更したりするとuser.jsで書き換えた値が全て初期値に戻ってしまいます。
12
+
13
+ ・・・すいません、見逃してました。
14
+
15
+ 作りによりますが、React.jsでは何かが変わるとReact.jsで構成されている全ての部分についてレンダリングし直す場合があります。入力とかの処理は別になっていますが、React.js以外でJavaScriptから直接DOM操作をされた部分がある場合、そこは前の状態に戻さる場合があります。必ずなるかというとそうでもないのですが、React.jsでレンダリングされた部分は**React.js以外での直接操作についてサポートしていない**だけで、React.jsのバージョンや構成によってことなります。
16
+
17
+ 対処方法はたぶんありません。やるとしたら、DOM操作では無く、キー操作をエミュレートするぐらいしか無いと思います。