React - toggle css class

Question

목록의 단일 항목에서 "활성"클래스를 전환 할 수 있기를 원합니다. 요소 목록을 가지고 있다고 가정 해보십시오.

<ul> 
    <li><a href="#" className="list-item">First</a></li> 
    <li><a href="#" className="list-item">Second</a></li> 
    <li><a href="#" className="list-item">Third</a></li> 
</ul> 

클릭하면 두 번째 요소에 클래스를 추가 할 수 있기를 원합니다. 왜냐하면 거기에 조건을 추가하면 다른 두 요소의 클래스가 변경되기 때문에 상태를 사용할 수 없습니다.

그래서 해결책은 자신의 상태와 자체 onclick 메서드를 가질 수있는 하위 구성 요소, 즉 자신의 클래스 만 변경할 수있는 <ListItem />을 만들 수 있습니다. 그런 다음, 클릭 할 때 다른 요소에서 "활성"클래스를 제거하려는 경우이 하위 구성 요소는 다른 요소에서 클래스를 제거하기 위해 부모에게 메소드를 전달해야합니다. 쉬운 종류 (10 초짜리 jquery 종류를 알고 있음)의 작업에서는 꽤 복잡해 보입니다.

누구나 쉽게 해결할 수 있습니까?

다른 큰 npm 모듈 인 document.getElementsByClassName (분명히)이나 refs를 사용하지 않아도됩니다.

Answer 1

item 구성 요소 외부에서 선택된 상태를 관리하고 소품으로 전달할 수 있습니다.
onSelect/onClick의 이벤트 처리기는 state을 트리거하고 변경할 수 있습니다.

const data = [1,2,3,4,5]; 
 

 
class List extends React.Component { 
 
\t constructor(props){ 
 
\t \t \t super(props); 
 
     
 
     this.state = { 
 
     \t selectedItem: 0 
 
     }; 
 
     this.onSelect = this.onSelect.bind(this); 
 
    } 
 
    
 
    onSelect(id){ 
 
    \t this.setState({ 
 
    \t selectedItem: id 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    \t const {selectedItem} = this.state; 
 
    \t return ( 
 
     <ul> 
 
      {data.map((d, index) => { 
 
      \t return <ListItem 
 
         key={index} 
 
         selected={index + 1 == selectedItem} 
 
         value={d} 
 
         id={d} 
 
         onSelect={this.onSelect} 
 
        /> 
 
      })} 
 
      
 
     </ul> 
 
    ) 
 
    } 
 
} 
 

 
const ListItem = (props) => { 
 

 
    const onSelect = (e) => { 
 
    \t props.onSelect(e.target.id); 
 
    } 
 
    
 
    const className = props.selected && "selected"; 
 
    \t 
 
\t return <li className={className} id={props.id} onClick={onSelect}>{props.value}</li> 
 
} 
 

 
ReactDOM.render(<List />, document.getElementById("root"));

ul{ 
 
    list-style: none; 
 
} 
 

 
li{ 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    cursor: pointer; 
 
} 
 

 
li.selected{ 
 
    background-color: green; 
 
    color: #fff; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

하는 일을 정의하는 상태 변수를하는 것이 문제를 접근하는 올바른 방법은 당신이 경우 인라인을 사용할 수 있습니다, 그리고 즉,

this.state = { 
    active: "first" // (or "second", "third", null, etc..) 
}; 

현재 "활성"입니다 문장과 같이 :

<li><a href="#" className={"list-item" + (this.state.active == "first" ? " active": "")}>First</a></li> 

이 요소들이 동적으로 생성 된 경우 this.state.active을 현재 선택된 요소의 색인/참조로 설정하는 간단한 문제이므로이 목록 요소를 하드 코딩한다고 가정합니다.