• 追加された行はこの色です。
• 削除された行はこの色です。
• React/子コンポーネントのフィールドから値を取得する へ行く。
• React/子コンポーネントのフィールドから値を取得する の差分を削除

#author("2018-05-09T01:39:11+00:00","default:haruki","haruki")
#author("2018-05-14T06:00:57+00:00","default:haruki","haruki")
* キーワード [#g7102040]
- React
- コンポーネント
- react-new-window

* したいこと [#p7c0026b]

react-new-window で開いた別ウィンドウを印刷させたい、のがきっかけ。

 window.print();

すると、親ウィンドウが印刷されてしまう。

ので、react-new-window がそのコンポーネントで保持する this.window の値を取得したい。react-new-window は window.open() したときの戻り値を this.window に保持している。

* どうやって [#dcf654a4]

ref を使う。

 <NewWindow {...newWindowProps} ref={element => this.newWindow = element} />

目的の window オブジェクトでプリントするには、

 this.newWindow.window.print();

* ちなみに [#yd4b5d7e]
* なお書き [#yd4b5d7e]

%%element がないよ、みたいなタイミングがあったので三項演算子した。%%

%%なお、%%this.newWindow とするには関数ではくて React.Component のサブクラスにする必要がある。
%%なお、%% this.newWindow とするには関数ではくて React.Component のサブクラスにする必要がある。

** 標準的なやり方ではフィールドを使わない [#t70e4959]

「[[Thinking in React - React>https://reactjs.org/docs/thinking-in-react.html]]」によると、

- 変更のある値はstateにする
- またがってstateを利用するコンポーネントのルートがstateをもつ
- 子コンポーネントからの伝達はハンドラにてする

ということのはずなので、通常はフィールドに変更のある値を持たない。従ってrefを使うこともない。

今回のは NewWindow がもってしまっているので、通常のケースではない。

* 参考 [#f88dafc9]
- [[Refs and the DOM - React>https://reactjs.org/docs/refs-and-the-dom.html]]
- [[rmariuzzo/react-new-window: 🔲 Pop new windows in React, using `window.open`.>https://github.com/rmariuzzo/react-new-window]]
- [[Reactのrefを理解する@Typescript - Qiita>https://qiita.com/knknkn1162/items/29d675c8cd26592a95b5]]