탭을 활성화로 설정하면 모두 가짜로 변합니다. 유성 반응

Question

시도 : 탭을 활성화하고 다른 모든 탭을 끕니다. 현재는 한 번에 하나씩 꺼야 만 작동합니다.

나는 이것을 어떻게 할 수 있는지 알아 내려고 노력하고있다. 나는 부모 구성 요소를 함수에 전달한 다음 모든 하위 클래스의 className 속성에 액세스 할 수있는 방법이 있다고 생각하고 있었습니까 ?? 현재 내가 가진 다음 render() 방법을, 당신의 반작용 렌더링 엔진의 장점에 대해 싸우고있어 외부에서 요소의 상태를 변경하려고함으로써

import React from 'react'; 
import ReactDOM from 'react-dom'; 


export default class TestContainer extends React.Component{ 


     setActive(event){ 
      event.preventDefault(); 

      //getting id from component 
      let isActive = event.target.id; 


      if(event.currentTarget.className === "list-group-item text-center active"){ 
        event.currentTarget.className = "list-group-item text-center"; 
      } else if(event.currentTarget.className === "list-group-item text-center") { 
        event.currentTarget.className = "list-group-item text-center active"; 
      } 

     } 



     render(){ 




     return (        

       <div className="col-lg-6 col-md-6 col-sm-6 col-xs-6 bhoechie-tab-container scroll-y"> 
         <div className="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu"> 
           <div className="list-group"> 
             <a href="#" onClick={this.setActive} id="eyes" className="list-group-item text-center active"> 
               <h4 className="glyphicon glyphicon-eye-close"></h4><br/>1 
             </a> 
             <a href="#" onClick={this.setActive} id="hair" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-tint"></h4><br/>2 
             </a> 
             <a href="#" onClick={this.setActive} id="mouth" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-minus"></h4><br/>3 
             </a> 
             <a href="#" onClick={this.setActive} id="clothing" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-user"></h4><br/>4 
             </a> 
             <a href="#" onClick={this.setActive} id="props" className="list-group-item text-center"> 
               <h4 className="glyphicon glyphicon-gift"></h4><br/>5 
             </a> 
           </div> 
         </div> 
)} 

Answer 1

. 구성 요소의 내부 또는 소품/컨텍스트 (선호하는 소품)를 통해 제공된 상태를 사용하여 클래스 이름에 active으로 렌더링 할 탭을 결정합니다.

클릭에 응답하면 상태를 변경하고 React가 새 상태에 따라 구성 요소를 다시 렌더링하도록합니다.

여기 제공된 제한된 예제의 경우 구성 요소의 상태에 활성 요소의 ID를 내부적으로 저장하는 것이 좋습니다.

export default class TestContainer extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     activeTab: this.props.activeTab || 'eyes' 
    }; 
    } 

    setActive(event) { 
    this.setState({ activeTab: event.target.id }); 
    } 

    render() { 
    const { activeTab } = this.state; 
    const tabClassName = "list-group-item text-center"; 
    const eyesTabClassName = tabClassName + (activeTab === 'eyes' ? ' active' : ''); 

    ... 

       <a href="#" onClick={this.setActive} id="eyes" className={eyesTabClassName}> 

    ... 

    } 
} 

이것은 대략적인 최적화되지 않은 해결책이지만 전체적으로 생각해야합니다. this.setState에 전화 할 때 React는 다시 렌더링해야하는 것으로 구성 요소를 표시하여 응답합니다. render() 메서드가 자동으로 호출되므로 모든 JSX가 다시 평가되고 다시 렌더링됩니다. React는 방금 생성 한 내용과 이미 가상 DOM에있는 내용을 비교하여 변경 사항을 병합합니다.

이는 className에 이전에 "활성"으로 렌더링 된 탭이 다시 렌더링된다는 것을 의미합니다. 더 이상 활성화되어 있지 않으면 렌더링 코드가 활성 클래스를 해당 탭의 className에 연결하지 않습니다. 또한 어느 클래스가 활성 상태인지에 따라 className에 "active"가 추가됩니다.

TL; DR

는 이벤트 핸들러의 DOM을 조작하지 마십시오. 상태를 조작하고 React가 새로운 상태로 다시 렌더링함으로써 React가 마법을 부릴 수 있도록하십시오.