質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1032閲覧

propsの値に応じたstateの更新について

seiyan0426

総合スコア16

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/09/24 12:07

前提・実現したいこと

親コンポーネントからのprops値がtrueであれば、Dialogを表示させたい

発生している問題

親コンポーネントのprops値がtrueであるにも関わらず、受け取ったコンポーネントでは、render部では、trueですが、コンストラクタ部では、falseになっています。
どのようにハンドリングすれば良いか教えてください。

以下のようなコードで実現したいのですが、親コンポーネントからtrueが渡されても、子コンポーネントのisDialogOpenには、falseが設定されており、ダイアログが開きません。
render() {
console.log(this.props.isOpen);
}
と確認すると、trueにはなっています。

該当のソースコード

親コンポーネント

javascript

1<Dialog isOpen={this.state.DialogIsOpen} />

子コンポーネント

javascript

1class Dialog extends Component { 2 constructor(props) { 3 super(props); 4 this.state = { 5 isDialogOpen: this.props.isOpen, 6 }; 7 }; 8 onBtnClose = () => { 9 this.setState({ 10 isDialogOpen: false, 11 }); 12 }; 13 render() { 14 return ( 15 <StyledDialog open={this.state.isDialogOpen}> 16 <StyledDialogTitle> 17 <StyledCloseImg src={Icons.CloseIcon()} onClick={this.onBtnClose} /> 18 </StyledDialogTitle> 19 </StyledDialog> 20 ); 21 } 22}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

~~ constructor() で、 this.state を設定するところを以下のように修正することで、うまくいきませんか? ~~

修正前:

javascript

1this.state = { 2 isDialogOpen: this.props.isOpen, 3};

修正後:

javascript

1this.state = { 2 isDialogOpen: props.isOpen, 3};

参考になれば幸いです。


追記

seiyan0426さんへ

上記の回答は勘違いによる誤った回答でしたので、すみませんが、無視してください。


追記2

以下でうまくいくのではないか? と思ってます。

<Dialog /> のほうでは、this.state を持たないようにします。(したがって、 Functional Componentにしてもよいと思います。) さらに、 <StyledCloseImg />onClickハンドラも propsから渡します。仮にonClosedという名前のpropsで渡すとすると以下のようになるでしょう。

JSX

1 2class Dialog extends Component { 3 render() { 4 return ( 5 <StyledDialog open={this.props.isOpen}> 6 <StyledDialogTitle> 7 <StyledCloseImg 8 src={Icons.CloseIcon()} 9 onClick={this.props.onClosed} /> 10 </StyledDialogTitle> 11 </StyledDialog> 12 ); 13 } 14} 15

次に、親コンポーネントのほうで、 (この名前がいいかはさておき、) onDialogClosed() というメソッドを用意しておき、これを、 <Dialog /> のprops onClosed に渡します。

JSX

1 2<Dialog 3 isOpen={this.state.DialogIsOpen} 4 onClosed={this.onDialogClosed} 5/> 6

上記の onDialogClosed() の中では、以下のように this.state.DialogIsOpen を false にするように、 setState します。

親コンポーネント:

javascript

1onDialogClosed() { 2 this.setState({DialogIsOpen: false}); 3}

javascript

1this.onDialogClosed = this.onDialogClosed.bind(this);

または、 class-properties の書き方が出来るbabel設定のようですので、以下です。

javascript

1onDialogClosed = () => { 2 this.setState({DialogIsOpen: false}); 3}

以上です。

投稿2018/09/24 12:36

編集2018/09/24 14:15
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

seiyan0426

2018/09/24 12:54

回答いただきましてありがとうございます。 上記を試してみましたが、すみません、うまくいきませんでした。
jun68ykt

2018/09/24 13:09

すみません。 私の回答はまったく役に立たないものでした。 修正前の this.props.isOpen であっても、 props で渡されたisOpenが入ってくるはずですね。勘違いしてました。 確認ですが、Dialog を使う親コンポーネントのほうで <Dialog isOpen={true} /> と、直接 true を指定した状態で親コンポーネントを render させると、Dialogは開いた状態になりますか?
seiyan0426

2018/09/24 13:19

いいえ、とんでもございません。 そうですね、直接、trueを指定することでダイアログはオープンします。
jun68ykt

2018/09/24 13:28

なるほどです。 ということは、Dialog側には問題はなくて、Dialogを使う親コンポーネントのほうで、何らか Dialog を開くトリガー(何かのボタンクリックだったり、APIの成功だったり等)があると思いますが、Dialog が開いて欲しい状態に変わったにも関わらず、それによって、親のほうで this.state.DialogIsOpen を true に更新できておらず、Dialogを開くべき状態になっても(親が)再renderされていない、ということではないかと思われます。 従って、親のコードを調べる必要がありそう、というのが今のところの感触です。
seiyan0426

2018/09/24 13:38

わかりました、ありがとうございます。 1点気になるのは、親コンポーネントの記述はそのままで、子コンポーネントをStyledDialog open={this.props.isOpen}とすることでダイアログはオープンするので、親からは適切な値が渡されていると判断できるのではと思ったのですが、別の話でしょうか。
jun68ykt

2018/09/24 14:04

> 子コンポーネントをStyledDialog open={this.props.isOpen}とすることでダイアログはオープンするので、親からは適切な値が渡されていると判断できる はい。その判断で正しいと思います。 そこも踏まえて、たぶんコレでうまくいくのでは?という案を、回答の追記2に書きましたので、参考にして頂ければと思います。
seiyan0426

2018/09/24 14:16

できました、本当にありがとうございます!非常に助かりました。
jun68ykt

2018/09/24 14:19

うまくいったようで、よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問