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も最近触り始めたばかりでどこに問題があるのかがわかりません。
どなたか、教えていただけませんでしょうか。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。