前提・実現したいこと
親コンポーネントからの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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/24 12:54
2018/09/24 13:09
2018/09/24 13:19
2018/09/24 13:28
2018/09/24 13:38
2018/09/24 14:04
2018/09/24 14:16
2018/09/24 14:19