카드 개별 속성 변경
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
클릭된 카드의 색상을 변경하고 싶은데, 제가 한 거는 모든 카드의 색상이 변경되더라구요. 클릭된 하나의 개별 카드의 속성만 변경하려면 어떻게 해야할까요? getElementById로 해보려니까 맨 첫번 째 카드만 변경되구요.. const [Color, setColor]=useState({ color:'#FFFFF' }); var msg const getbadgepathhandler = (event) => { event.preventDefault(); msg = event.target.getAttribute('data-msg') console.log("event target data : ",event.target); console.log("msg: "+ msg ) document.getElementById('clicked').style.backgroundColor='#DAF7A6' // document.backgroundColor='#DAF7A6' // document.getElementsByName('clicked').style.backgroundColor='#DAF7A6' const style=event.target.getAttribute('style') console.log(style) setColor((Color)=>({ ...Color, color: '#DAF7A6', })) } . . . const renderCards = Badges.map((badge, index) => { return <Col lg={6} md={8} xs={12} key={index}> <Card hoverable={true} // cover={<a href={`/badge/${badge.CLS_badgePath}`} ></a>} cover={<img style={{width:'100%', maxHeight:'150px', backgroundColor: Color.color }} id='clicked' src={`http://114.70.21.121:3000${badge.CLS_badgePath}`} onClick={getbadgepathhandler} data-msg={badge.SEQ} />} // > <Meta title={badge.CLS_title} description={`${badge.CLS_subjectName}`} /> <br/> <p className="level">Level: {`${badge.CLS_level}`}</p> <p>Authenticator: {`${(JSON.parse(badge.CLS_authenticator)).authName}`}</p> </Card> </Col> })
- card
- redux
- react-antd
- mongodb
- react
- 웹앱
- nodejs