-
React-Admin Modal 컴포넌트 사용Front-end/React.js 2020. 4. 29. 09:51
const [modal, setModal] = useState(false)
hook을 이용해서 modal open 상태를 관리했다.
초기값은 false여서 모달이 보이지 않는다.
{modal && <PlaceModal open={modal} closeModal={closeModal} />}
PlaceModal이라는 함수형 컴포넌트를 생성해서 props로 open 값과 closeModal 메소드를 넘겨주었다.
import {Button, Fade, Select, Input, makeStyles, Modal, InputLabel, MenuItem, FormControl} from '@material-ui/core' import React, {useState, useEffect} from 'react'
모듈은 이렇게 사용했다.
const useStyles = makeStyles((theme) => ({ modal: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, paper: { width: '25%', backgroundColor: theme.palette.background.paper, border: '2px solid #000', boxShadow: theme.shadows[5], padding: theme.spacing(2, 4, 3) }, button: { margin: 20 }, formControl: { display: 'block', margin: theme.spacing(1), '& > *': { width: '100%' } } }))
style은 material Modal 도큐먼트를 참고했다. '&> *'은 자식 태그들 모두 적용되게끔 한다.
const classes = useStyles() const [categoryList, setCategoryList] = useState([]) const [form, setValues] = useState({ address: '', title: '', titleKo: '', categoryId: 1 })
categoryList는 select input의 옵션으로 사용하는 리스트여서 useEffect로 처음에 API호출을 하고 저장을 했다.
form input값들은 useState를 사용해 딕셔너리 형태로 저장했다.
useEffect(() => { const getCategory = async () => { const result = await dataProvider('GET_LIST', 'categories') setCategoryList(result.data) } getCategory() }, [])
<FormControl className={classes.formControl} required> <InputLabel>주소</InputLabel> <Input className={classes.textInput} name="address" type="text" onChange={updateField} /> </FormControl>
FormControl 컴포넌트에 자식 컴포넌트로 라벨과 인풋을 사용했다.
const updateField = (e) => { setValues({ ...form, [e.target.name]: e.target.value }) }
input들의 name을 키값으로 사용하고 value값을 딕셔너리의 value로 저장했다.
<Modal open={open} onClose={closeModal} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" className={classes.modal} > <Fade in={open}> <div className={classes.paper}> <h3 id="transition-modal-title">장소 직접 등록하기</h3> <form> <FormControl className={classes.formControl} required> <InputLabel>주소</InputLabel> <Input className={classes.textInput} name="address" type="text" onChange={updateField} /> </FormControl> ... 생략
<Button variant="outlined" color="primary" type="submit" onClick={handleButton}> 등록하기 </Button>
등록하기 버튼으로 API에 POST형태로 값을 생성했다.
const handleButton = async (e) => { e.preventDefault() const {data} = await search() const {countryId} = data const posting = { ...form, countryId, } createPlace(posting) }
참고 : https://material-ui.com/api/modal/
Modal API - Material-UI
The API documentation of the Modal React component. Learn more about the props and the CSS customization points.
material-ui.com
'Front-end > React.js' 카테고리의 다른 글
[React Hooks] 회원가입 인증번호 타이머 구현 (0) 2020.05.30 [React.js] React로 Google Map Reverse Geocoding하기 (0) 2020.04.09 React Hook이란? - useState (0) 2020.04.01 📒 React Document 메모 (0) 2020.03.12 react-admin : <Show> View (0) 2020.03.04