REACT - 切换类 onclick [英] REACT - toggle class onclick

查看：40
本文介绍了REACT - 切换类 onclick的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想弄清楚如何切换活动类 onClick 以更改 CSS 属性.

我采取了很多方法，并阅读了很多 SO 答案.使用 jquery 会相对简单，但是，我无法想出用 react 来做到这一点.我的代码如下.谁能建议我应该怎么做?

不为每个项目创建一个新组件是否可以做到这一点?

class Test extends Component(){构造函数(道具){超级(道具)；this.addActiveClass= this.addActiveClass.bind(this);}addActiveClass() {//不知道在这里做什么}使成为() {<div><div onClick={this.addActiveClass}><p>1</p>

<div onClick={this.addActiveClass}><p>2</p>

<div onClick={this.addActiveClass}><p>3</p>

}}

解决方案

使用状态.Reacts 文档在这里.

class MyComponent 扩展组件 {构造函数(道具){超级(道具)；this.addActiveClass= this.addActiveClass.bind(this);this.state = {活动:假，};}切换类(){const currentState = this.state.active;this.setState({ active: !currentState });};使成为() {返回 (
)}}类测试扩展组件{使成为() {返回 (<div><MyComponent text={'1'}/><MyComponent text={'2'}/>

);}}

I am trying to figure out how to toggle an active class onClick to change CSS properties.

I have taken many approaches, and read many SO answers. Using jquery it would be relatively simple , however, I cannot figure out to do this with react. My code is below. Can anyone advise how I should do this?

Without creating a new component for each item is it possible to do this?

class Test extends Component(){

    constructor(props) {

    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);

  }

  addActiveClass() {

    //not sure what to do here

  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

解决方案

Use state. Reacts docs are here.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

这篇关于REACT - 切换类 onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆