Reactを使用してCSSクラスを追加および削除する

Question

Reactを初めて使用しています。 、ユーザーがいずれかのボタンをクリックするたびに、このボタンがアクティブになるべき

 <div className="btn-group"> 
     <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type1")} >Button1</button> 
     <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type2")} >Button2</button> 
     <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type3")} >Button3</button> 
     </div> 

1を選択：私は、ボタングループ内のいくつかのボタンがあります。 CSSクラスactiveを対応するボタンに追加する必要があることがわかりましたが、これを実装する方法がわかりません。

私は少しこれについて考えました。私はchangeDataTypeの機能を私のボタンに接続しています。そこには他のものもあります。私はそこで、何とかCSSを操作しますか？

だから、私は私が反応して、そのボタンのCSSを変更することができるか、ターゲット、および二する必要があるボタンをターゲットにする方法を、私の質問は最初あると思います。

Answer 1

状態変化が反応して再反応するときの反応。あなたのケースでは、何かの外観を変更したい場合、おそらく別のレンダリングを強制したいでしょう。あなたができることは、classNameを状態の一部にしておき、必要に応じて状態を更新して、コンポーネントを新しいclassNameで再レンダリングさせることです。たとえば：

constructor() { 
    super(); 
    this.state = { 
     className: 'btn' 
    } 
} 

render() { 
    return (
     <Button className={this.state.className}>Click me</Button> 
    ) 
} 

classNameが状態を更新状態にバインドされているので、ボタンは新しいclassNameで再びレンダリングするようになります。これは次のように行うことができます。

updateClass() { 
    let className = this.state.className; 
    className = className + ' ' + 'btn-primary' 
    this.setState({className}) 
} 

これは、ボタンのクリック時に呼び出し、ボタンのclassNameを更新できる機能の一例です。

Answer 2

あなたは次のようなものを行うことができ、アクティブ用の状態を反応させるの設定に基づいて

https://github.com/JedWatson/classnames

一緒にクラス名を参加クラス名ロジック+のために使用することができます素敵なユーティリティがあります。ロジックで必要なだけ複雑にすることができます。論理結果が偽であれば、そのキーは出力に含まれません。

var classNames = require('classnames'); 

var Button = React.createClass({ 
    // ... 
    render() { 
    var btnClass = classNames({ 
     btn: true, 
    'btn-active': this.state.isActive 
    }); 
    return <button className={btnClass}>{this.props.label}</button>; 
    } 
});