Material UI 모달창 디자인구현

 

 

import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import {withStyles} from '@material-ui/core/styles';

 

Material Modal창 같은 경우 title을 입력하는 창이 별도로 있으며 안에 내용에 대한 추가 라이브러리들을 import 해주어야 합니다.

여기서 DialogActions 같은 경우는 서버로 데이터를 보내기 위해 사용됩니다.

 

그런 다음 클릭에 대한 이벤트 함수를 작성해줍니다.

 

    handleClickOpen() {

        this.setState({
            open:true
        });

    }

    handleClose(){
        
        this.setState ({

            file : null,
            userName : '',
            birthday : '',
            gender : '',
            job : '',
            fileName : '',
            open : false
        })

    }

 

이제 테스트를 위해 Button과 Dialog를 작성해 실행합니다.

		<div>
                    <Button variant = "contained" color="primary" onClick={this.handleClickOpen}>
                        고객 추가하기
                    </Button>
                    <Dialog open={this.state.open} onClose={this.handleClose}>
                    <DialogTitle>고객 추가</DialogTitle>
                    </Dialog>
                </div>

 

이제 테스트가 완료됐으니 전에 있던 input 태그들을 material의 맞춰서 작업을 해줍니다.

 

 render(){

        const {classes} = this.props; 

        return(

                <div>
                    <Button variant = "contained" color="primary" onClick={this.handleClickOpen}>
                        고객 추가하기
                    </Button>
                    <Dialog open={this.state.open} onClose={this.handleClose}>
                    <DialogTitle>고객 추가</DialogTitle>
                    <DialogContent>
                         <input className ={classes.hidden} accept="image/*" id="raised-button-file" type="file" file={this.state.file} value={this.state.fileName} onChange={this.handleFileChange}/><br/>
                         <label htmlFor="raised-button-file">
                             <Button variant = "contained" color="primary" component="span" name="file">
                            {this.state.fileName === "" ? "프로필 이미지 선택" : this.state.fileName}
                            </Button>

                         </label>
                         <br/>
                        <TextField label="이름" input type="text" name="userName" value={this.state.userName} onChange={this.handleValueChange}/><br/>
                        <TextField label="생년월일" input type="text" name="birthday" value={this.state.birthday} onChange={this.handleValueChange}/><br/>
                        <TextField label="성별" input type="text" name="gender" value={this.state.gender} onChange={this.handleValueChange}/><br/>
                        <TextField label="직업" input type="text" name="job" value={this.state.job} onChange={this.handleValueChange}/><br/>
                    </DialogContent>

                    <DialogActions>
                    <Button variant="contained" color="primary" onClick={this.handleFormSubmit}>추가</Button>
                    <Button variant="outlined" color="primary" onClick={this.handleClose}>닫기</Button>
                    </DialogActions>
                    </Dialog>
                </div>


        )

    }

 

 

 

이제 다음과 같이 닫기 버튼도 바로 삭제가 되는 것이 아니라 모달 창을 이용해 확인과 취소 버튼을 활성화하겠습니다.

 

render() {
        return(
            <div>
            <Button variant="contained" color="secondary" onClick={this.handleClickOpen}>삭제</Button>
            <Dialog open={this.state.open} onClose={this.handleClosen}>
                <DialogTitle onClose={this.handleClose}>
                  삭제 경고
                </DialogTitle>
                <DialogContent>
                <Typography gutterBottom>
                선택한 고객 정보가 삭제됩니다.
                </Typography>
                </DialogContent>
                <DialogActions>
                    <Button variant="contained" color="primary" onClick={(e) => {this.deleteCustomer(this.props.id)}}>삭제</Button>
                    <Button variant="outlined" color="primary" onClick={this.handleClose}>닫기</Button>
                </DialogActions>
            </Dialog>
            </div>
        )
    }

 

이벤트, 함수는 꼭 바인딩해주어야 합니다! 그렇지 않으신다면 무한 로딩을 겪게됩니다.