react クリックしたところにクラスをつけてそれ以外ははずす

Question

*一部を抜粋
  constructor(props) {
    super(props);
    this.state = {
      cssstyle: false,
    };
  }




cssChange= () => {
  this.setState({ cssstyle: !this.state.cssstyle});
};

render() {

const cssstyle= ClassNames({
  [theme.cssstyle]: this.state.cssstyle,
});

return (
<section>
<div
  className={cssstyle}
  onClick={ this.cssChange.bind(this) }
>ボタン1</div>
<div
  className={cssstyle}
  onClick={ this.cssChange.bind(this) }
>ボタン2</div>
<div
  className={cssstyle}
  onClick={ this.cssChange.bind(this) }
>ボタン3</div>
</section>
);

};

cssファイル

section > div {
width:100px;
height:20px;
color:#333;
}
.cssstyle {
border:1px solid #ff0000;
background:#000;
color:#fff;
}

このような形でボタンが3つあり、
くりっくしたものだけ、.cssstyleのクラスを付与したいのですが、
上記ですと当然どのボタンを押しても全部のボタンに.cssstyleがついてしまいます。
jqueryとかであれば簡単なのですがreactの場合、どのように
クリックしたもの以外はスタイルを外すもしくは最初からくりっくしたものだけしか
クラスがつかないようにするのでしょうか？

javascriptのremove()とかでレンダーされた後に無理やりcssを消す方法は
できたのですができれば、react内できれいに行いたいと思いまして・・

Answer 1

パターン1.
ボタンごとに状態の元になるstateを別個に持つようにする

state = {
  isButton1Selected: false,
  isButton2Selected: false,
  isButton3Selected: false,
}

など

---

パターン2. ボタンを子Componentにする

class YourDiv extends React.Component {
  constructor(props) {
    this.state = {
      selected: false
    }
  }
  
  onClicked() {
    this.setState({selected: !this.state.selected});
  }
  
  render() {
    let classes = this.props.classes
    if(this.state.selected) classes.push('cssstyle')
    return (
      <div
        className={classes.join(' ')}
        onClick={evt => this.onClicked()}
      >{this.props.textContent}</div>
    )
  }
}

class YourClassName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <section>
        <YourDiv classes={['Other', 'Classes']} tetxtContent='ボタン1' />
        <YourDiv classes={['Other', 'Classes']} tetxtContent='ボタン2' />
        <YourDiv classes={['Other', 'Classes']} tetxtContent='ボタン3' />
      </section>
    );
  };
}

Comments

[thyda.eiqau]

おっと、失礼、それぞれが独立してクラスの付け外しができたらいいのかと思ってましたが、同時に複数個にクラスが付かない（ボタン1についている状態でボタン2をクリックしたら、1から外して2につける）ようにしないといけないのかな。そうであれば上記回答では不足ですね。必要に応じて編集しますので要件の再確認をお願いします。

[cheche0830]

ありがとうございました。
子コンポーネント化がよさそうです！
すいません、一点ご質問なのですが、

cssChange= (elm) => {
elm.classList.toggle('cssstyle');
};

こちらはどのタイミングで実行されて何をしているものでしょうか？？

[thyda.eiqau]

それは無視してください！当初toggleでいいんじゃねーのと思って書いていて、子componentのほうがスマートだなと思ってやめたんですが、消すのを忘れてました

[cheche0830]

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

[cheche0830]

少し前に進めたので、もう少し自分で考えてみてダメだった場合また違うスレッドで質問ささせていただきます！！！