다방
월세 전세 row 삭제하는 X 버튼 클릭 시 2회 발생..?
remove_row_btn1과 remove_row_btn2에 대한 addEventListener를 나란히 정의해두면 왜인지 모르겠지만 remove_row_btn1 클릭 시 remove_row_btn1에 대한 클릭이 두번 발생한다... 클릭한 버튼 자체(if (id === "monthly"))를 이용해 분기하니 해결!
// TradeInfo.js
if (id === "monthly") {
...
// 클릭 시 2회 발생..? row가 하나만 지워져야하는데 두개가 지워짐..
const remove_row_btn1 = document.getElementsByClassName("remove_row_btn1")[0];
remove_row_btn1.addEventListener("click", function (event) {
// 대충 event.target 을 삭제하는 코드가 있었음...
document.getElementById("monthly").disabled = false;
});
}// remove_tr 함수를 넣어서, row가 한개인지 두개인지에 따라 어떤 부분을 지울것인지 상세하게 정의해둠.
const remove_tr = (target) => {
if (document.getElementsByClassName("iNyxMi").length === 1) {
const th = document.getElementsByClassName("iNyxMi")[0].parentNode.parentNode.previousSibling;
th.removeAttribute("rowspan");
const tr = th.parentNode.nextSibling;
tr.insertBefore(th, tr.firstChild);
tr.previousSibling.remove();
} else {
target.disabled = true;
target.parentNode.remove();
}
};input 안에 숫자만 넣는 세련된 방법
값이 들어오면 oninput으로 확인해서 정규표현식으로 숫자가 아닌 문자는 replace 해버림.
// 백틱 안에 html 넣을때
`<input name="deposit" placeholder="전세" />`// value="" 가 같은 태그 안에 있으면 읽기 전용이라 수정이 안됨.
onInput={(e) => {
e.target.value = e.target.value
.replace(/[^0-9.]/g, "")
.replace(/(\..*)\./g, "$1");
}}캘린더 라이브러리 활용
// 캘린더 날짜 클릭 시 모달창 닫히도록...
<DatePickerCalendar
date={date}
onDateChange={setDate}
locale={enGB}
/>
// onDateChange 값에 여러개의 props를 넘길 수 없음. 애초에 이 캘린더 라이브러리에서 모달기능을 제공하지 않는게 문제...오늘 날짜와 선택한 날짜가 다르면 모달창을 닫아보자...
useEffect(() => {
if (
format(date, "yyyy.MM.dd", { locale: enGB }) !==
format(today, "yyyy.MM.dd", { locale: enGB })
) {
setShowCalendar(false);
return;
}
}, [date]);
// date가 변경될때만 setShowCalendar를 동작해줘야 함. 그냥 렌더 시에 동작시키면 무한 렌더링에 빠짐...아니 근데 생각해보니... date가 바뀌면 닫아주면되잖아?!?!
useEffect(() => {
setShowCalendar(false);
}, [date]);
빠굥