渡すだけクリックされた要素は -

Question

私は同じclassNameので複数の要素を持っていると私は（classNameの履歴ノードで）いくつかの要素がクリックされた場合、それは現在のクラス名と一緒にクラス名アクティブを取得する必要がありますしたいreactjs。

しかし、私は問題を抱えています。その要素の子要素があり、子要素がクリックされると、クラスも取得されます。アクティブ。

<div className="history-node-container" key={index}> 
    <div className="history-node" onClick={(e) => {this.handleHistoryClick(e.target)}}> 
    <span className="history-title">{heading.action}</span> 
    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span> 
    </div> 
</div> 

handleHistoryClick機能

handleHistoryClick(target){ 
    $('.history-node').removeClass('active'); //removing active class from all elements 
    target.className = 'history-node active'; 
} 

私は時にクラス名履歴ノードを持つ要素にユーザーがクリック

しかし、もし機能を実行したい：ここ

コードですユーザーがの履歴をクリックすると、ClickHandlerはクラスをアクティブからの歴史 - タイトル要素を与える。

予想される動作：履歴ノードがクリックされた場合、履歴ノードはクラスをアクティブにする必要があります。。

Answer 1

ワンチップおよび方法（二つの方法で）

ヒントあなたの問題を解決するために：jQueryでReactを混ぜない方が通常は最高のアイデアを。 Reactは、我々がDOMとやりとりする主なパラダイムシフトとしてもたらされました。 Reactについてもう少し詳しくお読みください。なぜそれが動作するのですか？DOMの要素をjQで単純に追加/削除するのとどう違うのですか？

ことであなたを助けるためにいくつかの参照：今

How to go from jQuery to React.js?

Thinking in React for jQuery Programmers

---

、バックあなたの質問に

あなたはcurrentTargetを使用する必要があります。.history-titleと.history-date要素が.history-node内にラップされている

として.history-node体が.history-title + .history-dateであることから、それらの任意のクリックが、それは親のイベントのトリガされます。それは正しい動作です。 JSでイベントをトリガーする場合、eventオブジェクトには、イベントをトリガーするイベントであるtargetと実際にイベントをリスニングするエレメントであるcurrentTargetという2つのパラメータが渡されます。コードのための今

：JQと

コンポーネント：

<div className="history-node-container" key={index}> 
    <div className="history-node" onClick={handleHistoryClick}> 
    <span className="history-title">{heading.action}</span> 
    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span> 
    </div> 
</div> 

クリック：

handleHistoryClick(event){ 
    $('.history-node').removeClass('active') 
    event.currentTarget.classList.add('active') 
} 

ザ・が反応方法（ピュアは、何のモジュールに反応しません）

コンポーネント：あなたが反応ソリューションでいつでもDOMを操作する必要はありませんか

class HistoryNode extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { isActive: false } 
     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick(e) { 
     let state = this.state 
     this.setState({isActive: !state.isActive}) 
    } 

    render() { 
     return(
     <div className="history-node-container"> 
      <div className={`history-node ${this.state.isActive ? 'active' : ''}`} onClick={handleHistoryClick}> 
      <span className="history-title">{heading.action}</span> 
      <span className="history-date"> 
       {moment(heading.added_at).format("MMMM Do, YYYY")}</span> 
      </div> 
     </div> 
    ) 
    } 
} 

注意してください。その特定のコンポーネントにイベントをアタッチし、状態の変化をUIに反映させる方法を定義し、Reactに残りの処理をさせるだけです。

Reference for target vs currentTarget

Answer 2

イベントは子コンポーネントに伝播すると思います。

これを試しましたか？

<div className="history-node-container" key={index}> 
    <div className="history-node" onClick={handleHistoryClick}> 
    <span className="history-title">{heading.action}</span> 
    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span> 
    </div> 
</div> 

HandleClick機能

handleHistoryClick(event){ 
    event.stopPropagation(); 
    $('.history-node').removeClass('active'); 
    event.target.className = 'history-node active'; 
} 

EDIT：あなたのコンポーネントの状態を使用してけれども（とjQueryなし）、それは簡単にすることができます。しかし、あなたがどのようにあなたのコンポーネントを書いたのかわからなくても、あなたにそれを示すスニペットを与えることはできません。 DOMと直接対話するときも注意してください。これはパフォーマンスの低下を意味します。反応状態を使用すると、そのようなことを避けることができます！