如何在没有 jquery 的情况下在 reactjs 中创建切换类事件？答案

【问题标题】：How to create toggle class event in reactjs without jquery?如何在没有 jquery 的情况下在 reactjs 中创建切换类事件？
【发布时间】：2016-02-20 05:13:33
【问题描述】：

在 jQuery 中，我们可以轻松设置切换事件，例如，

$('div').click(function(){
   $('div').toggleClass('active');
});

但是如何用 jQuery 在 reactjs 中实现这种东西。

【问题讨论】：

标签： javascript jquery html reactjs

【解决方案1】：

为了让你必须控制你的状态。

在这种情况下，我切换 style 属性，您也可以使用您的 className 属性：

var Hello = React.createClass({
    getInitialState: function(){
        return {
          isVisible: true
        }
    },
    handleClick: function(){
        var notVisible = !this.state.isVisible;
        this.setState({
          isVisible: notVisible
        })
    },
    render: function() {
        var styleClass = this.state.isVisible? 'hidden':'visible';
        console.log(styleClass);
        return <div>
            <span style={{visibility: styleClass}}> Hello World</span>
            <button onClick={this.handleClick}>Click me</button>
        </div>;
    }
});

ReactDOM.render(
    <Hello />,
    document.getElementById('container')
);

Link to fiddle

希望能帮到你

谢谢

【讨论】：

这段代码不切换类，但更容易理解

【解决方案2】：

在您的反应组件类中，您可以将切换标志作为状态数据this.state.toggle 的一部分。 render 方法将看到是否使用此数据添加类。我们可以在按钮上绑定一个点击监听器来翻转状态中的标志。

getInitialState: function () {
    return {
        toggle: false
    };
},

clickHandler: function () {
    this.setState({ toggle: !this.state.toggle })
},

render: function () {
    var clsName = this.state.toggle ? 'active' : '';
    return <button className={ clsName } onClick={ this.clickHandler }>{ this.props.label }</button>;
}

希望这会有所帮助。祝你好运，玩得开心！

【讨论】：

【解决方案3】：

您可以通过多种方式使用状态来执行此类操作：

首先你需要在你的组件中声明状态变量：

getInitialState: function () {
        return {
            isActive: false
        };
}

那么你将需要一个 onClick 函数

handleClick: function(){
   this.setState({isActive: !this.state.isActive});
}

现在你需要在你的渲染方法中使用这个属性

选项 1：使用“短 if”形式连接类

<div
   className={this.state.isActive? "active" : ""}
   onClick={this.handleClick}
>
    Some content...
</div>

选项 2：使用您可以在 https://github.com/petehunt/react-classset 找到的 React classet 插件

<div
   className={
        React.addons.classSet({
            active: this.state.isActive
        })
   }
   onClick={this.handleClick}
>
    Some content...
</div>

编辑：我刚刚发现 option2 si 已弃用，他们建议改用此实用程序：

https://github.com/JedWatson/classnames

【讨论】：

【解决方案4】：

https://github.com/JedWatson/classnames

render () {
    var btnClass = classNames({
       'btn-pressed': this.state.isPressed,
    });
    return <button className={btnClass}>{this.props.label}</button>;
}

此代码根据按钮按下状态切换 btn-pressed 类。

【讨论】：

是的，您首先需要使用getInitialState 方法创建一个状态。在下面检查我的答案。