다른 요소를 클릭하면 반응이있는 클래스를 제거합니다

Question

현재 jquery/php webapp에서 업그레이드하여 업그레이드합니다. 모든 것이 잘되고 반응 등의 개념을 이해합니다. 해결 방법을 찾을 수없는 유일한 문제는 사용자가 클릭하는 위치에 따라 클래스를 동적으로 추가/삭제하는 것입니다. 사용자가 클릭 할 때 트리거되는 몇 가지 드롭 다운이 있으며 다른 곳을 클릭하면 숨길 필요가 있기 때문에이 태그가 필요합니다.

var h2 = $("h2 a"); 

h2.on("click", function() { 
    if ($(this).is(".selected")) { 
    $(this).removeClass("selected"); 
    } else { 
    h2.removeClass("selected") 
     .filter(this).addClass("selected") 
    } 
}); 

(및/또는 REDUX) 반응에 동일한 기능을 모방하는 방법

:

은에서 : 그것은, JQuery와 문제에 대한 해결책은 간단하다으로 Give a class of "selected" when clicked on another <a> then remove the class if it's the same <a>

나는이 예제를 촬영했습니다 ?

이미지 더 당신이 클릭 이벤트에 대한 몇 가지 데이터를 전환하고 그에 따라 HTML 요소의 클래스 이름을 변경하려는 것은이

Answer 1

명확합니다.

'선택한'클래스를 기반으로 한 데이터는 부모 또는 구성 요소 상태의 어느 곳에서나 올 수 있습니다.

<div className={ myData ? 'selected' : '' } ></div> 

그러나 classname이라는 라이브러리로 클래스 이름을 변경하는 더 좋은 방법이 있습니다. 같은 일이 다음과 같이 수행됩니다 :

<div className={ classNames({ 'selected' : myData }) } ></div> 

지금까지는 렌더링 기능의 변경 사항을 표시하는 방법을 살펴 보았습니다. 두 번째로해야 할 일은 click 이벤트를 듣고 'myData'에서 'selected'클래스 이름을 제어하는 ​​데이터를 토글하는 함수를 실행하는 것입니다.

여기에 실제 예가 있습니다.이를 수행하는 방법에는 여러 가지가있을 수 있습니다. 그러나 클래스 이름을 토글하려면 classnames 라이브러리를 사용하는 것이 좋습니다.

다른 요소 (우리가 관찰 한 li 요소 제외)가 클릭되었을 때 클래스 제거에 대한 해결 방법은 클릭 이벤트 리스너가 해결할 수 있습니다.

For instance : 

import React, { Component }  from 'react' 
import classNames    from 'classnames' 

class DropDown extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     activeSelected : '' 
    } 
    this.handleClick = this.handleClick.bind(this) 
    } 
    componentDidMount(){ 
    global.document.addEventListener('click', this.handleClick, false) 
    } 
    componentWillUnmount(){ 
    global.document.removeEventListener('click', this.handleClick, false) 
    } 
    handleClick(event){ 
    if(event.target.className.includes('not-changing-css-class') && 
     this.state.activeSelected !== '' 
    ) this.setState({ activeSelected : '' }) 
    } 
    render(){ 
    let { activeSelected } = this.state 
    return (
     <ul> 
     <li 
      className={ classNames({ 
      'not-changing-css-class' : true, 
      'selected' : activeSelected === 'item1' 
      }) } 
      onClick={ event => this.setState({ activeSelected : activeSelected === 'item1' ? '' : 'item1' }) } 
     > 
      Item 1 
     </li> 
     <li 
      className={ classNames({ 
      'not-changing-css-class' : true, 
      'selected' : activeSelected === 'item2' 
      }) } 
      onClick={ event => this.setState({ activeSelected : activeSelected === 'item2' ? '' : 'item2' }) } 
     > 
      Item 2 
     </li> 
     <li 
      className={ classNames({ 
      'not-changing-css-class' : true, 
      'selected' : activeSelected === 'item3' 
      }) } 
      onClick={ event => this.setState({ activeSelected : activeSelected === 'item3' ? '' : 'item3' }) } 
     > 
      Item 3 
     </li> 
     </ul> 
    ) 
    } 
} 

Answer 2

구성 요소 상태에서 선택한 요소 색인 (또는 ID를 사용하는 경우 ID)을 보유 할 수 있습니다. 이 상태가 앱의 다른 구성 요소와 관련이 있다고 생각하는 경우 redux 저장소를 사용할 수 있지만 상태로 시작하는 것이 더 간단합니다.

이 상태가되면. 구성 요소 상태와 비교하여 링크가 선택되었는지 여부를 render() 함수에서 확인할 수 있습니다. 링크를 클릭 할 때 selectedIndex를 업데이트 할 수도 있습니다.

링크를 렌더링하는 간단한 예는 다음과 같습니다. JSX에서 표현식을 사용하는 대신 함수의 일부를 추출 할 수 있습니다.

```

allLinks.map((link, index) => 
    <a href={link.target} className={this.state.selectedIndex === index ? 'selected' : null}/> 
) 

```