wake-up-neo.net

Reagieren Sie den JS onClick-Ereignishandler

Ich habe 

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

Ich möchte den Hintergrund des angeklickten Listenelements einfärben. Wie kann ich das in React machen?

So etwas wie 

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

Warum nicht einfach:

onItemClick: function (event) {

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

},

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

Und wenn Sie mehr über das Thema erfahren möchten, können Sie das ausgewählte Element als Status der enthaltenen React-Komponente festlegen und dann auf diesen Status verweisen, um die Farbe des Elements in render zu bestimmen:

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

Natürlich möchten Sie diese <li>s in eine Schleife schreiben, und Sie müssen die li.on- und li.off-Stile festlegen, um Ihren background-color festzulegen.

78
ericsoco

Zwei Möglichkeiten, an die ich denken kann, sind 

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'));

Das ist mein persönlicher Favorit.

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'));

Hier ist eine DEMO

Ich hoffe das hilft.

60
Dhiraj

So definieren Sie einen reagieren onClick-Ereignishandler , der den Fragetitel mit der Es6-Syntax beantwortete

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>
    )
  }
}
31
steven iseki

Verwenden Sie ECMA2015. Pfeilfunktionen machen "dies" viel intuitiver.

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'));`
17
itcropper

Wenn Sie ES6 verwenden, finden Sie hier einen einfachen Beispielcode:

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;

In ES6-Klassentexten benötigen Funktionen nicht mehr das Schlüsselwort 'function' und sie müssen nicht durch Kommas getrennt werden. Sie können auch die Syntax => verwenden, wenn Sie möchten.

Hier ein Beispiel mit dynamisch erstellten Elementen:

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;

Beachten Sie, dass jedes dynamisch erstellte Element einen eindeutigen Referenzschlüssel haben sollte.

Wenn Sie das tatsächliche Datenobjekt (und nicht das Ereignis) an Ihre onClick-Funktion übergeben möchten, müssen Sie dieses auch in Ihre Bindung übergeben. Zum Beispiel:

Neue onClick-Funktion: 

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

Übergabe im Datenobjekt:

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

Behandlung von Ereignissen mit React-Elementen ist der Behandlung von Ereignissen sehr ähnlich auf DOM-Elementen. Es gibt einige syntaktische Unterschiede:

  • React-Ereignisse werden mit camelCase und nicht mit Kleinbuchstaben benannt. 
  • Mit JSX übergeben Sie eine Funktion als Ereignishandler und nicht eine Zeichenfolge.

Wie in React documentation erwähnt, sind sie in Bezug auf die Ereignisbehandlung dem normalen HTML-Code ziemlich ähnlich, aber die Ereignisnamen in React verwenden camelcase, da sie nicht wirklich HTML sind, sie sind JavaScript und auch die Funktion Wir übergeben Funktionsaufrufe in einem String-Format für HTML, sie sind unterschiedlich, aber die Konzepte sind ziemlich ähnlich ...

Schauen Sie sich das Beispiel unten an und achten Sie darauf, wie event an die Funktion übergeben wird:

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

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

Sie können die React.createClone-Methode verwenden. Erstellen Sie Ihr Element, als erstellen Sie einen Klon davon. Während der Erstellung des Klons können Sie Requisiten injizieren. Injizieren Sie eine onClick: -Methodenstütze wie diese

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

die changeColor-Methode legt den Status mit dem Duplikat fest, sodass Sie die Farbe während des Vorgangs festlegen können.

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>
    )
  }
2
Eddie D

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;

1

2019+: Sie sollten jetzt React Hooks verwenden

in React 16.8 eingeführt: https://reactjs.org/docs/hooks-intro.html

Was ist ein Haken? Ein Hook ist eine spezielle Funktion, mit der Sie sich "einhaken" können Funktionen reagieren. UseState ist beispielsweise ein Hook, mit dem Sie .__ hinzufügen können. Zustand auf Funktionskomponenten reagieren.

Wann würde ich einen Hook benutzen? Wenn Sie eine Funktionskomponente schreiben und Sie müssen einen Status hinzufügen, zuvor mussten Sie ihn in .__ konvertieren. eine Klasse. Jetzt können Sie einen Hook innerhalb der vorhandenen Funktion verwenden Komponente.

Es wird so etwas sein wie:

import React, { useState } from 'react';

function Example() {
  const [itemId, setItem] = useState();

  return (
    <div>
        <ul>
            <li onClick={() => setItem(1)} className={itemId == 1 ? "on" : "off"}>Component 1</li>
            <li onClick={() => setItem(2)} className={itemId == 2 ? "on" : "off"}>Component 2</li>
            <li onClick={() => setItem(3)} className={itemId == 3 ? "on" : "off"}>Component 3</li>
        </ul>
    </div>
  );
}
0
Sebastien Horin