Réagir JS gestionnaire d'événement onClick

Pourquoi ne pas simplement:

onItemClick: function (event) {

    event.currentTarget.style.backgroundColor = '#ccc';

},

render: function() {
    return (
        <div>
            <ul>
                <li onClick={this.onItemClick}>Component 1</li>
            </ul>
        </div>
    );
}

Et si vous voulez être plus Réagir-ive à ce sujet, vous pouvez définir l'élément sélectionné comme l'état de son contenant Réagir composant, puis de référence de l'état pour déterminer l'élément de couleur à l'intérieur de render:

onItemClick: function (event) {

    this.setState({ selectedItem: event.currentTarget.dataset.id });
    //where 'id' =  whatever suffix you give the data-* li attribute
},

render: function() {
    return (
        <div>
            <ul>
                <li onClick={this.onItemClick} data-id="1" className={this.state.selectedItem == 1 ? "on" : "off"}>Component 1</li>
                <li onClick={this.onItemClick} data-id="2" className={this.state.selectedItem == 2 ? "on" : "off"}>Component 2</li>
                <li onClick={this.onItemClick} data-id="3" className={this.state.selectedItem == 3 ? "on" : "off"}>Component 3</li>
            </ul>
        </div>
    );
},

Bien sûr, vous voulez mettre ces <li>s dans une boucle, et vous avez besoin de faire le li.on et li.off styles de jeu de votre background-color.

Ici est de savoir comment vous définissez un réagir gestionnaire d'événements onClick, qui était de répondre à la question du titre... à l'aide de es6 syntaxe

import React, { Component } from 'react';

export default class Test extends Component {
  handleClick(e) {
    e.preventDefault()
    console.log(e.target)
  }

  render() {
    return (
      <a href='#' onClick={e => this.handleClick(e)}>click me</a>
    )
  }
}

Si vous utilisez ES6, voici un exemple simple de code:

import React from 'wherever_react_is';

class TestApp extends React.Component {

  getComponent(event) {
      console.log('li item clicked!');
      event.currentTarget.style.backgroundColor = '#ccc';
  }

  render() {
    return(
       <div>
         <ul>
            <li onClick={this.getComponent.bind(this)}>Component 1</li>
         </ul>
       </div>
    );
  }
}

export default TestApp;

Dans l'ES6 classe d'organes, fonctions de ne plus exiger la "fonction" mot-clé et ils n'ont pas besoin d'être séparés par des virgules. Vous pouvez également utiliser l' => syntaxe ainsi si vous le souhaitez.

Voici un exemple avec une de créer dynamiquement des éléments:

import React from 'wherever_react_is';

class TestApp extends React.Component {

constructor(props) {
  super(props);

  this.state = {
    data: [
      {name: 'Name 1', id: 123},
      {name: 'Name 2', id: 456}
    ]
  }
}

  getComponent(event) {
      console.log('li item clicked!');
      event.currentTarget.style.backgroundColor = '#ccc';
  }

  render() {        
       <div>
         <ul>
         {this.state.data.map(d => {
           return(
              <li key={d.id} onClick={this.getComponent.bind(this)}>{d.name}</li>
           )}
         )}
         </ul>
       </div>
    );
  }
}

export default TestApp;

Noter que chaque créés dynamiquement élément doit avoir une référence unique "clé".

En outre, si vous souhaitez transmettre les données réelles de l'objet (plutôt que l'événement) dans votre onClick fonction, vous aurez besoin de passer que dans votre lier. Par exemple:

Nouvelle fonction onClick:

getComponent(object) {
    console.log(object.name);
}

Passage dans l'objet de données:

{this.state.data.map(d => {
    return(
      <li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
    )}
)}

JS:

import React from 'react';

class MyComponent extends React.Component {

  getComponent(event) {
      event.target.style.backgroundColor = '#ccc';
      
      //or you can write
      //arguments[0].target.style.backgroundColor = '#ccc';
  }

  render() {
    return(
       <div>
         <ul>
            <li onClick={this.getComponent.bind(this)}>Component 1</li>
         </ul>
       </div>
    );
  }
}

export { MyComponent };  //use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent'
export default MyComponent;

S'il vous plaît commentaire si vous downvote. C'est un non-standard (mais pas si rare) de Réagir modèle qui n'utilise pas JSX, au lieu de tout mettre en ligne. Aussi, il est Coffeescript.

Le "Réagir simple" à faire, ce serait avec le composant de l'état:

(c = console.log.bind console)

mock_items: [
    {
        name: 'item_a'
        uid: shortid()
    }
    {
        name: 'item_b'
        uid: shortid()
    }
    {
        name: 'item_c'
        uid: shortid()
    }
]
getInitialState: ->
    lighted_item: null
render: ->
    div null,
        ul null,
            for item, idx in @mock_items
                uid = item.uid
                li
                    key: uid
                    onClick: do (idx, uid) =>
                        (e) =>
                            # justf to illustrate these are bound in closure by the do lambda,
                            c idx
                            c uid
                            @setState
                                lighted_item: uid
                    style:
                        cursor: 'pointer'
                        background: do (uid) =>
                            c @state.lighted_item
                            c 'and uid', uid
                            if @state.lighted_item is uid then 'magenta' else 'chartreuse'
                        # background: 'chartreuse'
                    item.name

Cet exemple fonctionne, je l'ai testé en local.
Vous pouvez vérifier cet exemple de code exactement à mon github.
À l'origine de l'env est seulement pour mon propre tableau de r&d, mais je l'ai posté à Github pour cela. Il peuvent être écrites sur à un certain moment, mais vous pouvez consulter le commis depuis le 8 Septembre 2016 voir.

Plus généralement, si vous voulez voir comment cela CS/non-JSX modèle pour Réagir œuvres, découvrez quelques-uns des travaux récents ici. Il est possible que j'aurai le temps de mettre pleinement en œuvre d'un POC pour cette conception de l'application, la pile pour qui comprend NodeJS, Primus, Redis, & Réagir.