React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ
3181
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
13
0
줄바꿈 시 \ 필수인가요?
0
14
2
2605 이후 최신 클로드코드 강의 추가 부탁드립니다.
0
11
2
커리큘럼 문서 제공받을 수 있을까요?
0
19
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
13
1
mission 09-01 을 수행할 수 없어요
0
20
1
outputStyle 설정하는데 어디서 문제일까요?
0
21
3
test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데
0
13
2
검은화면
0
23
3
강의교환링크안열려요.....
0
22
2
영상재생에러 [확인부탁드려요!!!]
0
21
2
클로드 채팅에서 코드로 넘어가기
0
37
2
Context API vs Zustand 그리고 Auth
0
34
2
110강부터 따라가기가 힘듭니다...
0
49
2
커서에서 붙여넣기
0
35
2
깃허브 사용시 폴더경로 관련질문
0
23
2
[reducer] 기능별 폴더 구조 설계/ 파일 분리로 유지 보수 가능한 아키텍처 구축
0
22
2
순수 함수 / 순수 컴포넌트
0
22
1
스니펫이 이상해요
0
32
2
/output-style 명령어는 폐기 되었다고 나오네요.
0
40
2
프롬프트 작성시 html, css, javascript
0
36
2
Editor Component의 최적화 불가능 이슈
0
37
2
Cursor 창이 수업 내용과 달라요.
0
37
3
Supabase MCP 관련 질문입니다
0
40
2





