React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ
3167
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>;
데스크톱IDE채팅창 VS 데스크톱IDE 터미널
0
5
1
안티그래비티 확장프로그램
0
6
1
cd 명령어가 안들어요
0
8
1
클로드 데스크앱과의 차이
0
11
1
nmp run build의 기능
0
5
1
plan mode 개발 계획안 확인 불가
0
13
2
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
11
1
max x5 플랜을 결제했습니다.
0
17
1
클로드 초기 설정
0
16
1
사용자 스코프 설정 파일 적용 문제
0
10
1
클로드코드 유료플랜 할인 방법이 있을까요?
0
30
0
API Error : 400 에러의 원인과 해결방법이 궁금합니다!!
0
23
2
퍼미션 권한 설정 문의
0
26
2
커서에서 shift+enter가 안됩니다.
0
26
2
mcp 설치를 못하겠어요
0
42
2
라이브러리 관련 질문 있습니다!
0
28
2
output-styles은 Claude Code의 공식 기능이 아니라고 하는데 혹시 변경된걸까요?
0
28
2
클로드 변경
0
29
2
/config 에서 output-style 을 변경
0
27
1
한국어 문제
0
29
2
Node.js 관련 질문드립니다.
0
32
3
클로드 버전업 설치
0
29
2
쿠폰 문의 드립니다.
0
21
2
13강 프로젝트 생성 Next.js 설치이슈
0
28
3

