如何使用 React 在单击时切换类？

Question

我试图弄清楚如何在单击时切换活动类以更改 CSS 属性。

我的代码如下。谁能建议我该怎么做？如果不为每个项目创建一个新组件，是否可以这样做？

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

}

原文由 peter flanagan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用状态。请参阅 React 文档。

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

原文由 cssko 发布，翻译遵循 CC BY-SA 4.0 许可协议