React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ
3195
namuneulbo
작성한 질문수 1
0
안녕하세요, react로 웹 페이지를 제작 중입니다. 다름이 아니라 3개 이상 선택하면 alert창으로('3개까지만 선택 가능합니다')라고 띄우는 것 까지는 썼는데 이제 확인을 누르면 4개도 다시 클릭이 되더라구요.. 이걸 막는 방법은 뭐가 있을까요..?
관련된 함수랑 코드를 써놓겠습니다..!
const [number, setNumber] = useState(0);
const increaseNumber = ()=>{
setNumber(number+1)
};
const decreaseNumber = () => { // number의 값을 감소시키는 함수
setNumber(number - 1);
};
const over3=()=>{
if (number>=3){
alert('3개까지만 선택 가능합니다!');
}
}
//onClick에 카운트 세는 함수 설정되어있습니다.
<div className='movieposter'>
{datas.map((movie, i)=>(
movie.value === true ?
<img className='img-responsive_clicked' src="https://movie-phinf.pstatic.net/20220214_120/1644825641315cvVKI_JPEG/movie_image.jpg?type=f125" alt={i} onClick={() => {decreaseNumber();handleClickImage(i);}} />
:
<img className='img-responsive' src='img/movie_image1.jpg' alt={i} onClick={() => {increaseNumber(); handleClickImage(i);over3()}}/>
))}
</div>
답변 1
0
const [number, setNumber] = useState(0);
const increaseNumber = () => {
const isOver = over3();
if(isOver===false){
setNumber(number + 1);
}
};
const decreaseNumber = () => {
// number의 값을 감소시키는 함수
setNumber(number - 1);
};
const over3 = () => {
if (number >= 3) {
alert("3개까지만 선택 가능합니다!");
return true
}
return false;
};
//onClick에 카운트 세는 함수 설정되어있습니다.
<div className="movieposter">
{datas.map((movie, i) =>
movie.value === true ? (
<img
className="img-responsive_clicked"
src="https://movie-phinf.pstatic.net/20220214_120/1644825641315cvVKI_JPEG/movie_image.jpg?type=f125"
alt={i}
onClick={() => {
decreaseNumber();
handleClickImage(i);
}}
/>
) : (
<img
className="img-responsive"
src="img/movie_image1.jpg"
alt={i}
onClick={() => {
increaseNumber();
handleClickImage(i);
}}
/>
)
)}
</div>;
강의 잘 들었습니다.
0
2
0
터미널에서 커서 AI 직접 실행
0
17
2
해결했습니다
0
21
1
이런 경우는 어떤 조치를 취해야할까요?
0
18
2
hooks 설정이 안되요
0
36
2
영상 최신으로 엡데이트 요청
0
60
2
소스 코드가 회사 보안 프로그램에 막혀서 안 보여요.
0
51
2
claude code 상태표시줄 궁금합니다!
0
44
2
수파베이스 데모 버전
0
36
1
10월 15일 삭제예정 강의 문의
0
37
1
설치의 필요성
0
68
2
modal-root질문드립니다.
0
58
2
모달 여러개 질문드립니다
0
50
2
지금 강의가 어려우신분 추천드립니다.
0
48
1
기존의 완성된 CRUD의 Build.gradle에 security관련 dependency를 추가하면 문제가 생깁니다.
0
60
2
시작하기전에 질문 드립니다.
0
65
2
tsconfig.app.json 파일 설정(경로 별칭 옵션) 관련 질문입니다.
0
66
2
output style이 안나와요
0
54
2
강의제목에 10/15일 삭제라고 나와있는데,
0
48
1
CRA ? 질문입니다
0
47
1
교제 노션 복제 방법 문의
0
52
2
output style은 뭘선택하나요?
0
46
1
agent team vs shrimp task manager
0
56
2
rules 질문
0
49
2





