React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ
3201
namuneulbo
1 câu hỏi đã được viết
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
웹페이지
프론트엔드
Câu trả lời 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>;
8.3 강의에서 createPortal을 삭제하지 않은 이유가 궁금합니다.
0
10
1
장바구니 질문
0
18
1
업데이트는 안되는건가요 ???
0
29
1
수업 소스가 강의 시작전 코드만 있는게 맞나요?
0
16
2
useState는 왜 state를 setter를 통해 변경해야 하는지 궁금해요.
0
20
1
git 다운로드 관련
0
20
1
output style
0
23
2
스타터킷이 로컬호스트로 접속해서 웹화면으로 구현되어야 하는 이유가 뭔가요?
0
16
2
클로드코드 홈페이지만들기
0
19
1
cursor 앱 위로 스크롤
0
21
1
미션 자료 "다운로드 안됨"
0
29
2
미션 자료 다운 안됨
0
38
2
클로드 설치관련 문의
0
39
2
강의 자료가 어디있나요?
0
36
2
요즘도 mcp 많이 이용하시는 추세인가요?
0
77
2
이제 업데이트는 없는건가요 ㅠ
1
70
1
뭘 따라가야 하는지 잘 모르겠습니다.
0
64
2
56강 프로젝트 초기화 커밋 시 main이 아니라 master라는 칩이 붙습니다.
0
37
2
awesome mcp
0
53
2
VSCODE Extension Claude와 터미널 차이
0
64
1
claude-nextjs-starterkit에서 .claude폴더 생성
0
57
2
Claude Code 자동 Update 활성화 방법은?
0
56
2
Vercel 배포 과정에서 오류가 발생합니다
0
66
2
리프레시토큰
0
53
1

