toggleClass React js

Question

나는 반응하는 js로 웹 앱을 만들고있다. 나는 사용자가 div를 선택할 때 강조 표시하고 다시 클릭하면 선택을 취소하는 CSS를 설정했습니다. 이것은 jquery에있는 코드입니다 (하지만 반응으로 작성해야합니다). 다음과 같이 코드를 반응 내

$("#select-reward-cards .card").click(function() { 
    $(this).toggleClass('selected'); 
    selectRewardsArray.push($(this).attr('data-value')); 
}); 

$('.goal').click(function() { 
    $(".goal").removeClass("selected"); 
    $(this).toggleClass('selected'); 
}); 

$("#reward-cards .card").click(function() { 
    if ($(this).hasClass('selected')) { 
    } else { 
     $("#reward-cards .card").removeClass("selected"); 
     $(this).toggleClass('selected'); 
    } 
}); 

입니다 : 내가 반응하는 것은 매우 새로 온 사람으로

var Test = React.createClass({ 

btnTapped: function(value, thisObj) { 
    console.log(value);  

}, 
render: function() { 
var stationComponents = this.props.stations.map((station, index) => { 

return <div onClick={() => this. handleSort(station, $(this))}><img src="img/test.png" />{station}</div>; 

    }); 
    return <div>{stationComponents}</div>; 
    } 
}); 

var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw","bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"]; 

ReactDOM.render(<Test stations={cards} />, document.getElementById('test-div')); 

나의 무지를 용서하십시오,하지만 어떻게 내가 반응에서 JQuery와 기능을 복제 할 수 있습니까? 감사.

Answer 1

반면, DOM 요소에 클래스가 있는지 확인하여 클래스를 전환하지 마십시오. 상태를 변경하면 모든 요소가 새 상태 (fiddle)에 반응 할 수 있습니다.

클래스를 변경하는 데 삼진 연산자를 사용했지만 classnames이 더 좋은 해결책입니다.

var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw", "bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"]; 

var Station = React.createClass({ 
    btnTapped: function() { 
    this.props.onStationClick(this.props.index); 
    }, 

    render() { 
    return (
     <div className={ this.props.selected ? 'selected' : '' } 
     onClick ={ this.btnTapped }> 
       { this.props.children } 
     </div> 
    ); 
    } 
}); 

var Test = React.createClass({ 
    getInitialState: function() { 
    return { 
     selected: null 
    } 
    }, 
    onStationClick: function(index) { 
    this.setState({ 
     selected: index 
    }); 
    }, 
    render: function() { 
    var stationComponents = this.props.stations.map((station, index) => (
     <Station key={ index } 
      index={ index } 
      selected={ this.state.selected === index } 
      onStationClick = { this.onStationClick }> 
      { station } 
     </Station> 
    )); 

    return (
     <div >{ stationComponents }</div> 
    ); 
    } 
}); 

ReactDOM.render( 
    <Test stations={cards} />, 
    document.getElementById('container') 
); 

Answer 2

주에서도 가능합니다. 처음 상태를 선택하거나 선택 해제하려면 먼저 상태를 가져옵니다.

import React from 'react'; 

class Example extends React.Component { 
    constructor(props){ 
     super(props); 
     class : 'selected' 
     // here initially it will show selected 
    } 

    toggleClass(){ 
     this.setState({class: this.state.class == 'selected' ? '' : 'selected'}) 
    } 

    render(){ 
     return(
     <div> 
      <div> 
      <button onClick={this.toggleClass.bind(this)} type='button'></button> 
      </div> 
      // Now pass state to div class that will toggle everytime user clicks. 
      <div className={this.state.class}> 
       // xyz data 
      </div> 
     </div> 
    ); 
    } 
} 

export default Example;