を除去反応onclickの私は、次のしている

Question

は、コンポーネントが反応しますすべての部門のこれはなぜでしょうか？

Answer 1

Reactはイベントリスナー自身をバインドします。したがって、onClickはDOMのonclick属性に直接影響しません。しかし、あなたのコードは実際に動作します（スニペット参照）。

class PlayerRow extends React.Component { 
 
    activateKey() { 
 
     console.log('ddd') 
 
} 
 
render() { 
 

 
    return (
 
       <div className="row-par"> 
 
        <div className="details-cont"> 
 
        </div> 
 
        <div className="key-cont"> 
 
         <div onClick={this.activateKey} className="key">asd</div> 
 
         <div onClick={this.activateKey} className="key">qwe</div> 
 
         <div onClick={this.activateKey} className="key">zxc</div> 
 
        </div> 
 
       </div> 
 
     ) 
 

 
} 
 
} 
 

 
ReactDOM.render(
 
    <PlayerRow/>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

でも、私は2つのことを示唆して、アクションハンドラまたはより良いため.bind(this)を使用し、それがデフォルトでスコープを継承するよう矢印関数を使用します。

handleClick =() => { 
    console.log('this is:', this); 
} 

項目： - jQueryのを使用していないhttps://facebook.github.io/react/docs/handling-events.html

セカンド事

からは、ドキュメントを反応させます。あなたはReactを使ってDOMを管理しています.jQueryはデフォルトで副作用を発生させるので、反応の仕方に干渉します。 Reactはコンポーネントの状態や小道具に応じてビューを自動的にレンダリングします。最適化は素晴らしいですし、jQueryは小道具も状態も編集しないので、反応のクールなものは利用しません。

あなたが達成したいことについては、どのブロックがクリックされたかを示すパラメータをアクションハンドラに与えることができます。onClick={() => activateKey(1)}ハンドラでは、アクティブなIDをローカル状態で保存し、IDがキーIDと一致するかどうかによってブロックを条件付きで与えます。それが私の考えです。

Answer 2

renderメソッドでES6矢印関数または.bind（）を使用すると、不要なオーバーヘッドがコンポーネントに追加されます。あなたがこれを行う場合は、バインド操作が唯一のクラスの初期化フェーズ中に一度メソッドごとに行われる

import React, { Component } from "react"; 

export default class Demo extends Component { 
    constructor(props) { 
     super(props); 

     this.activateKey = this.activateKey.bind(this); 
    } 

    activateKey() { 
     console.log("ddd"); 
    } 

    render() { 

     return (
      <div className="row-par"> 
       <div className="details-cont"></div> 
       <div className="key-cont"> 
        <div onClick={this.activateKey} className="key">asd</div> 
        <div onClick={this.activateKey} className="key">qwe</div> 
        <div onClick={this.activateKey} className="key">zxc</div> 
        </div> 
       </div> 
     ); 
    } 
} 

：あなたは本当に、このようなのようなコンストラクタで、あなたの方法に（これを）.bind必要があります。レンダリングメソッドの中でES6の矢印関数または.bind（thisなど..）を使用すると、すべての再レンダリングでonClickイベントを持つ各要素からバインディングが実行されます。

クリックイベントだけを関数に渡す必要がある場合は、.bind（thisなど..）やrenderメソッドのES6矢印関数を使用する必要があります。