부트캠프 개발일지 2023-2024/Bootcamp 생활기록
[7주차] 리액트: 확인/취소 알림창
whereanna00
2023. 11. 16. 11:16
리액트: 확인/취소 알림창
입력창에 모두 값을 입력하고, submit을 눌렀을 때 다시 confirm 하는 알림창을 넣는 것은 사용자경험을 더 높인다고 생각한다.
따라서 이번 개인 프로젝트에서 addhandler 의 validation check 마지막 부분에 window.confirm("string") 을 넣어보았다.
바닐라 자바스크립트 환경에서는 window 없이 사용하면 된다.
// NEW LETTER ADD
const addHandler = (event) => {
event.preventDefault();
const newLetter = {id: uuid(), userName: userName, createdAt: moment().format('YY-MM-DD HH:mm'), message: message, wroteTo: selectedCharacter,
}
console.log('입력값으로 만들어진 객체',newLetter);
const userNameLength = userName.trim().length;
const messageLength = message.trim().length;
// validation check
if (userNameLength === 0 || messageLength === 0) {
alert("Please fill out the blank");
return;
} else if (userNameLength > 20) {
alert("Please write your usernmae within 20 characters.");
return;
} else if (messageLength > 100) {
alert("Please write your message within 100 characters.");
return;
} else if (/^\s*$/.test(userName) || /^\s*$/.test(message)) {
alert("Only spaces have been entered.");
return;
} else {
if(window.confirm("Are you sure you want to send the letter?") === true){
setLetters([...letters, newLetter]);
alert("Your letter has been successfully sent!");
} else {
return false;
}
// input box init
setUserName("");
setMessage("");
}
}
728x90
반응형