[REACTJS] 다른 사람과 클릭 된 요소 만 제거하는 추가 클래스를 온 클릭 반응

다른 사람과 클릭 된 요소 만 제거하는 추가 클래스를 온 클릭 반응

해결법

1. ---

   1.당신은 클릭에 활성 인덱스를 설정할 수 있습니다 :

   당신은 클릭에 활성 인덱스를 설정할 수 있습니다 :

   // State
   this.state = {
     activeIndex: null
   };
   // event
   onElementClicked(e) {
     this.setState({ activeIndex: e.target.index })
   }
   // class to use
   className={this.index === this.state.activeIndex ? 'big-size' : ''}
   

2. ---

   2.CONST {useState, useEffect} = 반작용; CONST 애플리케이션 = () => { CONST [div에, = useState ([ '청색', '그린', '검은 색']); CONST [선택하는 setSelected = useState (NULL); CONST의 onclick = (ID) => { (ID)에 setSelected; } 반환

   {divs.map (홍보 =>

   온 클릭 (PR)}> )} } ReactDOM.render ( <애플리케이션 /> document.getElementById를 ( '루트') ); .container { 표시 : 플렉스; 높이 : 200 픽셀; } .box { 플렉스 : 1; 커서 : 포인터; 전환 : 모든 .3s이 완화 된; } .selected { 플렉스 : 2; } <스크립트 SRC = "https://unpkg.com/react/umd/react.development.js"> <스크립트 SRC = "https://unpkg.com/react-dom/umd/react-dom.development.js"> <스크립트 SRC = "https://unpkg.com/babel-standalone@6/babel.min.js"> <스크립트 SRC = "https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"> <스크립트 SRC = "https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js">

   CONST {useState, useEffect} = 반작용; CONST 애플리케이션 = () => { CONST [div에, = useState ([ '청색', '그린', '검은 색']); CONST [선택하는 setSelected = useState (NULL); CONST의 onclick = (ID) => { (ID)에 setSelected; } 반환

   {divs.map (홍보 =>

   온 클릭 (PR)}> )} } ReactDOM.render ( <애플리케이션 /> document.getElementById를 ( '루트') ); .container { 표시 : 플렉스; 높이 : 200 픽셀; } .box { 플렉스 : 1; 커서 : 포인터; 전환 : 모든 .3s이 완화 된; } .selected { 플렉스 : 2; } <스크립트 SRC = "https://unpkg.com/react/umd/react.development.js"> <스크립트 SRC = "https://unpkg.com/react-dom/umd/react-dom.development.js"> <스크립트 SRC = "https://unpkg.com/babel-standalone@6/babel.min.js"> <스크립트 SRC = "https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"> <스크립트 SRC = "https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js">

from https://stackoverflow.com/questions/62309556/react-onclick-add-class-to-clicked-element-but-remove-from-the-others by cc-by-sa and MIT license