Javascript toggleClass反应js

我正在用react js构建一个web应用程序。我将CSS设置为当用户选择一个高亮显示的div并且再次单击时取消选择。这是我在jquery中的代码（但需要用react编写）

我的代码如下：

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'));

var Test=React.createClass({
btntaped:函数（值，thisObj）{
console.log（值）；
},
render:function（）{
var stationComponents=this.props.stations.map（（站点，索引）=>{
返回this.handleSort（station，$（this））}>{station}；
});
返回{stationComponents}；
}
});
var卡=[“亚马逊”、“aeo”、“艾利”、“巴恩斯”、“布鲁明代尔”、“bbw”、“百思买”、“富豪”、“cvs”、“易趣”、“gyft”、“itunes”、“jcp”、“panera”、“斯台普斯”、“沃尔玛”、“target”、“丝芙兰”、“沃尔格林”、“星巴克”]；
ReactDOM.render（，document.getElementById（'test-div'）；

---

请原谅我的无知，因为我是react新手，但是我如何在react中复制jquery功能呢？谢谢。

在react中，您不会通过检查DOM元素上是否存在该类来切换该类。更改状态后，每个元素都可以对新状态作出反应（）

我使用了三元运算符来更改类，但这是一个更好的解决方案

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')
);

var卡=[“亚马逊”、“aeo”、“aerie”、“巴恩斯”、“布鲁明代尔”、“bbw”、“百思买”、“富豪”、“cvs”、“易趣”、“gyft”、“itunes”、“jcp”、“panera”、“staples”、“沃尔玛”、“target”、“丝芙兰”、“沃尔格林”、“星巴克”]；
var Station=React.createClass({
btntaped:function（）{
this.props.onStationClick（this.props.index）；
},
render（）{
返回(
{this.props.children}
);
}
});
var Test=React.createClass({
getInitialState:函数（）{
返回{
所选：空
}
},
onStationClick:函数（索引）{
这是我的国家({
选定：索引
});
},
render:function（）{
var stationComponents=this.props.stations.map（（站点，索引）=>(
{车站}
));
返回(
{stationComponents}
);
}
});
ReactDOM.render（
,
document.getElementById（'容器'）
);

在react中，您不会通过检查DOM元素上是否存在类来切换该类。更改状态后，每个元素都可以对新状态作出反应（）

我使用了三元运算符来更改类，但这是一个更好的解决方案

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')
);

var卡=[“亚马逊”、“aeo”、“aerie”、“巴恩斯”、“布鲁明代尔”、“bbw”、“百思买”、“富豪”、“cvs”、“易趣”、“gyft”、“itunes”、“jcp”、“panera”、“staples”、“沃尔玛”、“target”、“丝芙兰”、“沃尔格林”、“星巴克”]；
var Station=React.createClass({
btntaped:function（）{
this.props.onStationClick（this.props.index）；
},
render（）{
返回(
{this.props.children}
);
}
});
var Test=React.createClass({
getInitialState:函数（）{
返回{
所选：空
}
},
onStationClick:函数（索引）{
这是我的国家({
选定：索引
});
},
render:function（）{
var stationComponents=this.props.stations.map（（站点，索引）=>(
{车站}
));
返回(
{stationComponents}
);
}
});
ReactDOM.render（
,
document.getElementById（'容器'）
);

您也可以使用状态来执行此操作。 首先，按您希望的选择或取消选择初始状态

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;

从“React”导入React；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
类别：“选定”
//在这里，最初它将显示选中的
}
toggleClass（）{
this.setState（{class:this.state.class=='selected'？'''selected'}）
}
render（）{
返回(
//现在将状态传递给div类，该类将在用户每次单击时切换。
//xyz数据
);
}
}
导出默认示例；

您也可以使用状态来执行此操作。 首先，按您希望的选择或取消选择初始状态

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;

从“React”导入React；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
类别：“选定”
//在这里，最初它将显示选中的
}
toggleClass（）{
this.setState（{class:this.state.class=='selected'？'''selected'}）
}
render（）{
返回(
//现在将状态传递给div类，该类将在用户每次单击时切换。
//xyz数据
);
}
}
导出默认示例；