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

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

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

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

React.js

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

Q&A

解決済

1回答

955閲覧

React+Redux+OnsenUIでDialogが二重に表示される

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

React.js

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

0グッド

0クリップ

投稿2017/09/15 03:41

編集2017/09/15 07:41

React+Redux+OnsenUIでモバイルアプリ開発をしています。
そこでOnsenUIのDialogを使おうとしているのですが、実装すると二重に表示されてしまいます。

二重にDialogが表示されているとCLOSEをクリックすると同時に消えるのですが、枠外をクリックしてDialogを消すとズレて消えるのでおかしな見た目になってしまいます。

以下のコードはマス目一つを描画するコンポーネント(の一部)です。
showDialogClick(dialogShown)でわざわざ関数を作っているのは、この二重に表示される原因がどこにあるか確かめようとしたものです。この関数で実行してもconsoleのlogは一つしか表示されませんが、Dialogは二重に表示されてしまっています。

javascript

1export default class TableDialogSquare extends React.Component{ 2 3 showDialogClick(dialogShown){ 4 if(!dialogShown){ 5 console.log('false') 6 this.props.showDialogClick() 7 }else{ 8 console.log('true') 9 } 10 } 11 12 render(){ 13 14 const { 15 dialogShown, 16 } = this.props 17 18 return( 19 <Col> 20 {/* <StyledTableDialogSquare onClick={()=>this.props.showDialogClick()}>aaa</StyledTableDialogSquare> */} 21 <div onClick={()=>this.showDialogClick(dialogShown)}>aaa</div> 22 <Dialog 23 isOpen={dialogShown} 24 isCancelable={true} 25 onCancel={()=>this.props.closeDialogClick()} 26 > 27 <div style={{textAlign: 'center', margin: '20px'}}> 28 <p style={{opacity: 0.5}}>This is a dialog!</p> 29 <p> 30 <Button modifier="material" onClick={()=>this.props.closeDialogClick()}>Close</Button> 31 </p> 32 </div> 33 </Dialog> 34 </Col> 35 ) 36 } 37}

以下はContainer(上のコンポーネントの親にあたる部分)のコードです。
renderTimeTable()関数で複数表示させています。

javascript

1class TimeTable extends React.Component{ 2 3 renderTimeTable(props){ 4 return( 5 <Row> 6 <TableDialogSquare {...props}/> 7 <TableDialogSquare {...props}/> 8 <TableDialogSquare {...props}/> 9 <TableDialogSquare {...props}/> 10 <TableDialogSquare {...props}/> 11 </Row> 12 ) 13 } 14 15 render(){ 16 const props = this.props 17 return( 18 <div> 19 <Weekbar/> 20 {this.renderTimeTable(props)} 21 </div> 22 ) 23 } 24 25} 26 27const mapStateToProps = (state) => { 28 return state 29} 30 31const mapDispatchToProps = (dispatch) => { 32 return{ 33 showDialogClick(){ 34 dispatch(AppActions.showDialog()) 35 }, 36 closeDialogClick(){ 37 dispatch(AppActions.closeDialog()) 38 } 39 } 40} 41 42export default connect( 43 mapStateToProps, 44 mapDispatchToProps 45)(TimeTable) 46

renderTimeTable()関数の中身に<TableDialogSquare {...props}/>を5つ書いていますが、
これの数が増えた分だけ表示されるDialogも増えています。
一つだけクリックしても全部表示されているようです。

また、私はReactもReduxも最近触り始めたばかりでどこに問題があるのかがわかりません。
どなたか、教えていただけませんでしょうか。よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

すみません。とても基礎の基礎の部分の間違いをしてしまっていました。

中にStyledTableDialogSquareとDialogが含まれているTableDialogSquareコンポーネントを作り、それを
<TableDialogSquare {...props}/>
<TableDialogSquare {...props}/>
<TableDialogSquare {...props}/>
<TableDialogSquare {...props}/>
<TableDialogSquare {...props}/>
と描画していたので、1行ごとにDialogが作成されてしまっていました。

しかし、Dialog自体はこのアプリケーション全体の中でただ一つで良いのでした。
なので、最終的にはTimeTableコンポーネントの中身は

StyledTableDialogSquare
StyledTableDialogSquare
StyledTableDialogSquare
StyledTableDialogSquare
StyledTableDialogSquare
Dialog

のようにするべきでした。

投稿2017/09/15 17:23

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問