react onClickでclassのオンオフ

Question

たとえば、

<div className="btn" onClick={this.func}>ボタン</div>

のようなコードがあった場合、

onClickで
のようなトグル関係を作りたいのですが、

<div className="btn" onClick={this.func}>ボタン</div> ↓↑ <div className="btn on" onClick={this.func}>ボタン</div> どのように書けばいいでしょうか？

追記
this.func内でonの取り付け取り外しを行いたいです！

Comments

[masaya_ohashi]

そのthis.funcはトグル処理とは無関係の別の処理をしているメソッドですか？

[cheche0830]

追記させて頂きました！

Answer 1

私ならこんな感じにします。

constructor(props) {
  super(props);
  this.state = {
    toggle: false // toggleの初期状態を設定
  };
}
func(e) {
  this.setState({
    toggle: !this.state.toggle // state.toggleフラグを反転させる
  });
}
render() {
  // state.toggleを見てonを結合するか否かを決める
  return <div className={"btn" + this.state.toggle ? " on" : ""} onClick={this.func}>ボタン</div>;
}

Comments

[cheche0830]

ありがとうございました！！！できました！！！

Answer 2

ベストアンサーだとbtnクラスが消えてしまっていたので
classNameの三項演算子を()で囲むと動きました。

バージョンの違いですかね。

return <div className={"btn" + (this.state.toggle ? " on" : "")} onClick={this.func}>ボタン</div>;