Next.UI 의 modal 컴포넌트를 사용할때 몇가지 팁
1) 선택된 아이템의 값으로 모달에서 표시할 때
- 모달을 띄우는 버튼 클릭 이벤트에서 useState에 변수를 선언하여 현재 선택된 데이터를 설정한다.
// 바로 이벤트를 매핑 하는 경우 클릭 된 값을 설정하거나 전달 할 수 없으므로,
<Button onPress={clickDelete} >선택 </Button>
// 바로 이벤트를 매핑하지 말고 { } 현재 설정값 을 state에 설정하고 모달을 띄우고 설정된 값을 참조하도록 한다 호출을 하는 방식을 아래와 같이 바꿔본다.
// event={eventFunc} ---> event={ ( ) =>{ eventFunc(parameter) } }
const [selectedData, setSelectedData] = useState<MyItem>();
const clickButton = (item: MyItem) => {
console.log(item)
setSelectedData(item)
onOpen() // modal 열기
}
//----------------------------------------------------
<Button onPress={()=>{clickButton(item)}} />
// Modal 내에서, item의 속성을 표시한다
{item.title}
2) 모달에서 데이터를 처리하고 모달을 닫을 때, 모달내 button 에 이벤트를 연결하고 호출
<Button color="primary" variant="ghost" onPress={onProcess}>닫기</Button>
//--------------------------------------------
const onProcess = () => {
someCustomProcess() // some custom process you needed
onOpenChange() // modal close
}