inflearn logo
강의

Khóa học

Chia sẻ kiến thức

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

3183

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

keeppgoing5759

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

plan mode를 진행하는것에 있어서

0

9

1

클로드 코드 설치 관련

0

15

1

스타터킷 중요도에 대한 질문입니다.

0

15

1

mission12-01 guide.md파일 누락

0

14

1

슬라이드 오타

0

23

0

전체적인 개발에 대해 문의드립니다.

1

39

1

챌린지 시작일 문의

0

39

0

줄바꿈 시 \ 필수인가요?

0

49

2

2605 이후 최신 클로드코드 강의 추가 부탁드립니다.

0

50

2

커리큘럼 문서 제공받을 수 있을까요?

0

44

1

ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?

0

31

1

mission 09-01 을 수행할 수 없어요

0

33

1

outputStyle 설정하는데 어디서 문제일까요?

0

30

3

test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데

0

23

2

검은화면

0

32

3

강의교환링크안열려요.....

0

34

2

영상재생에러 [확인부탁드려요!!!]

0

27

2

클로드 채팅에서 코드로 넘어가기

0

42

2

Context API vs Zustand 그리고 Auth

0

39

2

110강부터 따라가기가 힘듭니다...

0

65

2

커서에서 붙여넣기

0

41

2

깃허브 사용시 폴더경로 관련질문

0

29

2

[reducer] 기능별 폴더 구조 설계/ 파일 분리로 유지 보수 가능한 아키텍처 구축

0

29

2

순수 함수 / 순수 컴포넌트

0

27

1