React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ
3175
namuneulbo
1 asked
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>
react
reactjs
웹페이지
프론트엔드
Answer 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
7
1
이정도면 영상 다시 찍어야 되는거 아닌가요
0
4
1
statusline 문의드려요
0
13
1
포스트 작성 중 이탈 방지 기능 (취소 버튼 클릭 시 오류)
0
9
0
화면을 tmux로 어떻게 열수 있나요? (VS 사용중)
0
15
1
진행이안되네요
0
21
1
/init을 하기 전인데, 강의화면처럼 settings.local.json이 없어요.
0
31
2
섹션 5 영상 안나옴
0
24
1
강의 화면이랑 실제 UI 화면들이랑 너무 다릅니다.
0
34
2
맥 커서에서 클로드 어떻게 실행하나요?
0
25
3
@에이전트 자동완성 기능
0
32
2
mac) brew 설치 후 에러
0
30
2
근본적인 질문
0
39
2
수업 자료 사이트가 또 바뀌었을까요?
0
21
1
cursor UI
0
29
1
제7강 : sonnet으로 변경후 model 확인거 따라하는데 안됨
0
31
2
미션6 진행 관련 .html파일 미저장
0
26
2
.claude 가 없습니다. 왜그런가요
0
46
2
클로드 접속이 안되고 있습니다.
0
37
2
playwright 설치시 같이 설명해주세요 아니면 저같이 실수가 나오네요
0
38
1
git 복수로 커밋하기
0
55
3
Context7 설치 방법 바뀐 듯 한데...
0
45
2
\init를 할때마다 Claude.md파일이 자동으로 업데이트 되는지 궁금합니다.
0
33
2
"포스트 생성에 실패했습니다" 실패 문구와 함께 에러가 발생합니다ㅠㅠ
0
47
2

