Reagire sul gestore di eventi JS onClick

io ho

var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( 
  • Component 1
); } }); React.renderComponent(, document.body);

Voglio colorare lo sfondo dell’elemento della lista cliccato. Come posso farlo in React?

Qualcosa di simile a

 $('li').on('click', function(){ $(this).css({'background-color': '#ccc'}); }); 

Perché non solo:

 onItemClick: function (event) { event.currentTarget.style.backgroundColor = '#ccc'; }, render: function() { return ( 
  • Component 1
); }

E se vuoi essere più reattivo su di esso, potresti voler impostare l’elemento selezionato come stato del suo componente React contenente, quindi fare riferimento a quello stato per determinare il colore dell’object all’interno del render :

 onItemClick: function (event) { this.setState({ selectedItem: event.currentTarget.dataset.id }); //where 'id' = whatever suffix you give the data-* li attribute }, render: function() { return ( 
  • Component 1
  • Component 2
  • Component 3
); },

Ovviamente, vorrai mettere quei

  • s in un ciclo e devi impostare gli stili li.on e li.off impostare lo background-color .

    Due modi in cui posso pensare sono

     var TestApp = React.createClass({ getComponent: function(index) { $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({ 'background-color': '#ccc' }); }, render: function() { return ( 
    • Component 1
    • Component 2
    • Component 3
    ); } }); React.renderComponent( , document.getElementById('soln1'));

    Questo è il mio preferito.

     var ListItem = React.createClass({ getInitialState: function() { return { isSelected: false }; }, handleClick: function() { this.setState({ isSelected: true }) }, render: function() { var isSelected = this.state.isSelected; var style = { 'background-color': '' }; if (isSelected) { style = { 'background-color': '#ccc' }; } return ( 
  • {this.props.content}
  • ); } }); var TestApp2 = React.createClass({ getComponent: function(index) { $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({ 'background-color': '#ccc' }); }, render: function() { return (
    ); } }); React.renderComponent( , document.getElementById('soln2'));

    Ecco una DEMO

    Spero che aiuti.

    Ecco come si definisce un gestore di eventi onClick che risponde al titolo della domanda … usando la syntax es6

     import React, { Component } from 'react'; export default class Test extends Component { handleClick(e) { e.preventDefault() console.log(e.target) } render() { return (  this.handleClick(e)}>click me ) } } 

    Utilizzare ECMA2015. Le funzioni freccia rendono “questo” molto più intuitivo.

     import React from 'react'; class TestApp extends React.Component { getComponent(e, index) { $(e.target).css({ 'background-color': '#ccc' }); } render() { return ( 
    • this.getComponent(e, 1)}>Component 1
    • this.getComponent(e, 2)}>Component 2
    • this.getComponent(e, 3)}>Component 3
    ); } }); React.renderComponent( , document.getElementById('soln1'));`

    Se utilizzi ES6, ecco un semplice codice di esempio:

     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( 
    • Component 1
    ); } } export default TestApp;

    Negli organismi di class ES6, le funzioni non richiedono più la parola chiave ‘function’ e non devono essere separate da virgole. Puoi anche usare la syntax => se lo desideri.

    Ecco un esempio con elementi creati dynamicmente:

     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() { 
      {this.state.data.map(d => { return(
    • {d.name}
    • )} )}
    ); } } export default TestApp;

    Nota che ogni elemento creato dynamicmente dovrebbe avere una “chiave” di riferimento univoca.

    Inoltre, se si desidera passare l’object dati effettivo (anziché l’evento) nella funzione onClick, sarà necessario trasferirlo nel bind. Per esempio:

    Nuova funzione onClick:

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

    Passando nell’object dati:

     {this.state.data.map(d => { return( 
  • {d.name}
  • )} )}

    Gestire eventi con elementi React è molto simile alla gestione degli eventi sugli elementi DOM. Ci sono alcune differenze sintattiche:

    • Gli eventi di reazione sono denominati utilizzando camelCase, anziché in minuscolo.
    • Con JSX si passa una funzione come gestore di eventi, piuttosto che una stringa.

    Così come accennato nella documentazione di React , sono abbastanza simili al normale HTML quando si parla di gestione degli eventi, ma i nomi degli eventi in React utilizzano Camelcase, perché non sono realmente HTML, sono JavaScript, inoltre, si passa la funzione mentre si passa alla chiamata di funzione in un formato stringa per HTML, sono diversi, ma i concetti sono piuttosto simili …

    Guarda l’esempio qui sotto, fai attenzione al modo in cui l’evento viene passato alla funzione:

     function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return (  Click me  ); } 

    Puoi utilizzare il metodo React.createClone. Crea il tuo elemento, piuttosto che crearne uno. Durante la creazione del clone, puoi iniettare oggetti di scena. Iniettare un onClick: metodo prop come questo

    { onClick : () => this.changeColor(originalElement, index) }

    il metodo changeColor imposterà lo stato con il duplicato, permettendoti di impostare il colore nel processo.

     render() { return( 
      {this.state.items.map((val, ind) => { let item =
    • {val}
    • ; let props = { onClick: () => this.Click(item, ind), key : ind, ind } let clone = React.cloneElement(item, props, [val]); return clone; })}
    ) }
     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( 
    • Component 1
    ); } } export { MyComponent }; // use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent' export default MyComponent;

    Si prega di commentare se si è a valle. Questo è un pattern React non standard (ma non così raro) che non usa JSX, mettendo invece tutto in linea. Inoltre, è Coffeescript.

    Il modo “Reagire” per farlo sarebbe con lo stato del componente stesso:

    ( 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 

    Questo esempio funziona – l’ho provato localmente. Puoi controllare questo codice di esempio esattamente nel mio github . Originariamente l’env era solo locale per i miei scopi di ricerca e sviluppo, ma l’ho pubblicato su Github per questo. Potrebbe essere scritto a un certo punto, ma è ansible controllare il commit dall’8 settembre 2016 per vedere questo.

    Più in generale, se vuoi vedere come funziona questo pattern CS / no-JSX per React, dai un’occhiata a qualche lavoro recente qui . È ansible che avrò il tempo di implementare completamente un POC per questa idea di app, la cui pila include NodeJS, Primus, Redis e React.