inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ

3175

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>

react reactjs 웹페이지 프론트엔드

답변 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>;

live server, korean 을 검색해도 아무것도 나오지 않음

0

7

0

커서질문

0

14

1

강의자료

0

13

1

SUPABASE에서 AOI 선택여부

0

12

2

클로드 코드 터미널 사용시 git, git 허브 활용 법

0

15

1

mcp.json파일 생성 X

0

16

2

강의 내용이 정신이없네요 ;;

0

31

2

제 컴퓨터에서는 Claude's plan이 아래와 같이 나오는데 괜찮은 건가요?

0

18

2

강의에서 사용하는 prompt

0

15

2

window 11 환경 + git bash 터미널 statusline 반영이 안됩니다 ㅠ

0

20

2

강사님 질문있습니다.

0

18

1

프로젝트를 커밋할때 알려주세요

0

22

1

작업결과물이 수업내용의 화면이 좀 다르네요

0

30

2

강의 도중 에러가 발생합니다.

0

28

2

사진과 같이 영상에 한글이 실시간으로 영어로 번역되어 보입니다

0

26

2

커밋버튼 비활성화

0

27

2

Cursor 질문

0

23

2

웹사이트 구축 질문

0

35

1

플러그인, git repo 설치 및 삭제

0

27

1

162 자료

0

22

2

supabase mcp로 테이블 생성 보여주실떄

0

30

2

settings.local.json

0

34

2

강의자료는 어떻게 제작하시나요?

0

31

2

notion 에이전트와 prd-generator 에이전트와의 관계

0

31

2