toggleClass React js

Question

私はreact jsを使ってWebアプリケーションを構築しています。私はCSSを設定して、ユーザーがハイライトしたdivを選択し、再びクリックするとその選択が解除されます。これは私が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;