javascript - parameter - Reaccionar controlador de eventos JS onClick

react onclick parameter

Question

yo tengo

var TestApp = React.createClass({
      getComponent: function(){
          console.log(this.props);
      },
      render: function(){
        return(
             <div>
             <ul>
                <li onClick={this.getComponent}>Component 1</li>
             </ul>
             </div>
        );
      }
});
React.renderComponent(<TestApp />, document.body);

Quiero colorear el fondo del elemento de la lista en el que se hizo clic. ¿Cómo puedo hacer esto en React?

Algo como

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

Answer 1

El manejo de eventos con elementos React es muy similar al manejo de eventos en elementos DOM. Hay algunas diferencias sintácticas:

• Los eventos de reacción se nombran usando camelCase, en lugar de minúsculas.
• Con JSX, pasa una función como controlador de eventos, en lugar de una cadena.

Entonces, como se menciona en la documentación de React , son bastante similares al HTML normal cuando se trata de Manejo de eventos, pero los nombres de eventos en React usan camelcase, porque no son realmente HTML, son JavaScript, también, usted pasa la función mientras pasamos la llamada en formato de cadena para HTML, son diferentes, pero los conceptos son bastante similares ...

Mire el ejemplo a continuación, preste atención a la forma en que el evento se pasa a la función:

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

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Answer 2

¿Por qué no solo:

onItemClick: function (event) {

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

},

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

Y si desea ser más reactivo al respecto, es posible que desee establecer el elemento seleccionado como estado de su componente React que contiene, luego haga referencia a ese estado para determinar el color del elemento en el 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>
    );
},

Por supuesto, querrás poner esos <li> s en un bucle, y necesitas hacer que los estilos li.on y li.off establezcan tu background-color .

Answer 3

Así es como define un controlador de eventos reaccionar onClick , que respondía al título de la pregunta ... usando la sintaxis es6

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>
    )
  }
}

Answer 4

Dos formas en las que puedo pensar son

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

Este es mi favorito personal.

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 (
            <li onClick={this.handleClick} style={style}>{this.props.content}</li>
        );
    }
});

var TestApp2 = React.createClass({
    getComponent: function(index) {
        $(this.getDOMNode()).find(''li:nth-child('' + index + '')'').css({
            ''background-color'': ''#ccc''
        });
    },
    render: function() {
        return (
            <div>
             <ul>
              <ListItem content="Component 1" />
              <ListItem content="Component 2" />
              <ListItem content="Component 3" />
             </ul>
            </div>
        );
    }
});
React.renderComponent(<TestApp2 /> , document.getElementById(''soln2''));

Aquí hay una DEMO

Espero que esto ayude.

Answer 5

Puede utilizar el método React.createClone. Cree su elemento, que cree un clon de él. Durante la creación del clon, puedes inyectar accesorios. Inyecte un onClick: método de apoyo como este

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

El método changeColor establecerá el estado con el duplicado, permitiéndole configurar el color en el proceso.

render()
  {
    return(
      <ul>

        {this.state.items.map((val, ind) => {
          let item = <li key={ind}>{val}</li>;
          let props = { 
            onClick: () => this.Click(item, ind),
            key : ind,
            ind
          }
          let clone = React.cloneElement(item, props, [val]);
          return clone;
        })}

      </ul>
    )
  }

Answer 6

Si está utilizando ES6, aquí hay un código de ejemplo simple:

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;

En los cuerpos de clase ES6, las funciones ya no requieren la palabra clave ''función'' y no necesitan estar separadas por comas. También puede usar la sintaxis => si lo desea.

Aquí hay un ejemplo con elementos creados dinámicamente:

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;

Tenga en cuenta que cada elemento creado dinámicamente debe tener una ''clave'' de referencia única.

Además, si desea pasar el objeto de datos real (en lugar del evento) a su función onClick, deberá pasarlo a su enlace. Por ejemplo:

Nueva función onClick:

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

Pasando el objeto de datos:

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

Answer 7

Utilice ECMA2015. Las funciones de flecha hacen que "esto" sea mucho más intuitivo.

import React from ''react'';


class TestApp extends React.Component {
   getComponent(e, index) {
       $(e.target).css({
           ''background-color'': ''#ccc''
       });
   }
   render() {
       return (
           <div>
             <ul>
               <li onClick={(e) => this.getComponent(e, 1)}>Component 1</li>
               <li onClick={(e) => this.getComponent(e, 2)}>Component 2</li>
               <li onClick={(e) => this.getComponent(e, 3)}>Component 3</li>
             </ul>
           </div>
       );
   }
});
React.renderComponent(<TestApp /> , document.getElementById(''soln1''));`

Answer 8

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;

Answer 9

Por favor comente si vota negativamente. Este es un patrón de reacción no estándar (pero no tan raro) que no usa JSX, sino que pone todo en línea. Además, es Coffeescript.

La ''React-way'' para hacer esto sería con el propio estado del componente:

( 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

Este ejemplo funciona: lo probé localmente. Puede consultar este código de ejemplo exactamente en mi github . Originalmente, el entorno era solo local para mis propios fines de investigación y desarrollo de pizarra, pero lo publiqué en Github para esto. Puede que se escriba en algún momento, pero puede consultar el commit del 8 de septiembre de 2016 para ver esto.

En términos más generales, si desea ver cómo funciona este patrón CS / no-JSX para React, consulte algunos trabajos recientes here . Es posible que tenga tiempo para implementar completamente un POC para esta idea de aplicación, cuya pila incluye NodeJS, Primus, Redis y React.