Question

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

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

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

Answer 1

要知道你必须控制你的状态。

在这种情况下，我切换样式属性，您也可以使用 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

我希望我会帮助你。

由于

Answer 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>;
}

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

Answer 3

您可以通过以下几种方式使用州做这样的事情：

首先，您需要在组件中声明状态变量：

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

然后你需要一个onClick函数

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

现在您需要在渲染方法中使用此属性

选项1：使用“short 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被弃用了，他们建议改为使用这个实用程序：

https://github.com/JedWatson/classnames

Answer 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 类。

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

4 个答案: