• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 리액트 map 함수 개별 클릭이벤트

리액트 map 함수 개별 클릭이벤트

6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 글쓴이
  • #27393

    장경민
    참가자

    선생님  맵함수로 리스트를 만들어서

    해당 리스트를 클릭 시 마다  e.currentTarget 으로  클릭한녀석에게만  효과를 주는것 까진 알겠는데

    1번 리스트를 클릭했을때 classList.add ('active') 를 주고 2번이나 다른 리스트를 클릭했을때

    1번 리스트의 클래스를 제거하기위해서는 어떠한 방법으로 코드를 짜야할까요??

     

    맵함수 내에 개별 스타일링 주는 법을 알고싶습니다.

    #27431

    codingapple
    키 마스터

    .active가 들어있는 요소를 찾아서 classList.remove('active') 해주세요 라고 코드한줄 짜면 될듯요 

    state만들어두고 state가 이럴 경우 class명 추가해주세요 라고 삼항연산자 쓰는 방법도 있습니다

     

    #27507

    장경민
    참가자

    잘 이해가 가지않는데 

    일단 맵으로 돌릴때 콜백함수가 커렌트 요소 , 요소 인덱스로 돌아간다면

     const [글자들 , set글자] = useState([

     {Id: 0 , 글내용: '글자2'},

    {Id: 1 , 글내용: '글자2'},

    {Id: 2 , 글내용: '글자3'},

    ])

    글자들.map( (current , index ) => {

    retrun (

        <div>

           {current.id}  // 결과 0,1,2  3개 생성

    < /div>

    )

    } )

    위처럼 커렌트로 돌리게 될경우에 

     글자의 배열에서 {Id: 0 , 글내용: '글자2'} 에 추가로 true false 를 주고

     {Id: 0 , 글내용: '글자2', 상태:false}

    이제 맵 내부에서

    글자.map( (current , index ) => {

    retrun (

        <div onClick={(e)=>{

           current.상태 != false

           ? 클래스 추가 

           : 클래스 삭제

          }}>

           {current.id} 

    < /div>

    )

    } )

    이렇게 하고 해당 맵함수 돌아가는 div에 온클릭시 클릭요소 빼고는  다 true 로 바꿔라 라는true false 로 반환되는 state 만들어서 버튼 누를때마다 변경되게 하면 돌아갈까요?

    #27508

    장경민
    참가자

    모바일로 작성해서 오타나 문법이 틀렸을수도 있습니다. 저렇게 해서 맵 돌아가는 div 클릭 요소들이 개별로 돌아갈수있을까요?

    #27518

    codingapple
    키 마스터

    네 onclick말고 className={} 안에 삼항연산자 쓰면 될듯요  

    탭기능같은데 지금 보이는 탭 id가 무엇인지 따로 state로 만들어둔다음 

    <div className={지금보이는탭 == current.id ? 'active' : null }  >

        {current.id}

    < /div>

    이래도 될듯요 

    #27585

    장경민
    참가자

    <div id={cur.id} className={누른거 == cur.id ? 'click' : null } key={cur.id} style={{width: '200px',margin: '20px auto 20px auto',padding:' 20px',
                                border: '1px solid'}} onClick={(e)=>{
                                   
                                 
                                   console.log(cur.상태);
                                   console.log(누른거);
                                   set누른거(cur.id);
                               
                                   
                                }}>

     생각한대로 잘될까 했는데 알려주신 방법 참고하여 적용하니 바로되네요  감사합니다! ㅎㅎ

6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠