複数のdivのonClickイベントに反応します

Question

私は3つの異なる関数を書き出すことなくこれらの要素のそれぞれにクラス名を追加するonClickイベントを作成しようとしています。ただし、イベントがクリックされると、イベントは3つすべてで発生します。クリックするとonClickだけが機能するように、これを変更するにはどうすればよいですか？

const userVote = React.createClass({ 

    getInitialState: function() { 
     return { 
      condition: false 
     } 
     }, 
     handleClick: function() { 
     this.setState({ 
      condition: !this.state.condition 
     }); 
     }, 


    render() { 
     return(

       <div onClick={this.handleClick} className= { this.state.condition ? "positive active" : "positive"}></div> 

       <div onClick={this.handleClick} className= { this.state.condition ? "neutral active" : "neutral"}>Not Sure</div> 

       <div onClick={this.handleClick} className= { this.state.condition ? "negative active" : "negative"}></div> 

     ); 
    } 
}); 

Answer 1

あなたが言ったように、一度に1つのdivだけを有効にします。アクティブなdivを追跡する単一の状態変数を維持することができます。

handleClick: function(divName) { 
    this.setState({ 
     activeDiv: divName 
    }); 
} 

<div> 
    <div onClick={() => this.handleClick('div1')} className= { this.state.activeDiv === 'div1' ? "positive active" : "positive"}>Div1</div> 

    <div onClick={() => this.handleClick('div2')} className= { this.state.activeDiv === 'div2' ? "neutral active" : "neutral"}>Div2</div> 

    <div onClick={() => this.handleClick('div3')} className= { this.state.activeDiv === 'div3' ? "negative active" : "negative"}>Div3</div> 
</div> 

私は、アクティブなdiv要素を追跡しますactiveDivという名前の状態変数を作成した、とclassNameを適用するとき、あなたは現在のdivがアクティブであるかどうかを確認することができます。ここで

、作業Plunkerです：Plunker（ES6構文）

JSFiddle（ES5構文）

PS：あなたは結果を確認するには、ブラウザのコンソールを開く必要があります。

Answer 2

あなたがこのアプローチを試すことができます：すべての

• まず、あなたはそう、返すのレンダリングに一つだけのdivを返す必要があります。それ

• があなたのthis.state

• 上conditionはonClickの関数にそのよう

何か別のパラメーターを追加少し変更カプセル化：

const userVote = React.createClass({ 
getInitialState: function() { 
    return { 
     div1: false, 
     div2: false, 
     div3: false 
    } 
    }, 
    handleClick: function(divNumber) { 
    this.setState({ 
     divNumber: !this.state.condition 
    }); 
    }, 


render() { 
    return(
     <div> 
      <div onClick={() => this.handleClick('div1')} className= { this.state.condition ? "positive active" : "positive"}></div> 

      <div onClick={() => this.handleClick('div2')} className= { this.state.condition ? "neutral active" : "neutral"}>Not Sure</div> 

      <div onClick={() => this.handleClick('div3')} className= { this.state.condition ? "negative active" : "negative"}></div> 
     </div> 
    ); 
} 

を}）;