☰

Reactでクリック時にクラスを切り替えるにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript reactjs
Reactでクリック時にクラスを切り替えるにはどうすればいいですか? 質問する

クリック時にアクティブ クラスを切り替えて 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>
  }

}

ベストアンサー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>
        );
    }
}

おすすめ記事