Wie Sie mehrere event-Handler für dasselbe Ereignis in der React.js

Alle:

Frage ich mich, ob es möglich ist, dass die Bindung mehrerer event-Handler für dasselbe Ereignis?

Beispiel:

var LikeToggleButton = React.createClass({
    render: function(){
        (function toggle(){
            this.setState({liked:!like});
        }).bind(this);
        return (
            <div onClick={toggle}>TOGGLE LIKE</div>  
        );
    }
});

Bis zu diesem Punkt scheint alles normal, aber ich möchte hinzufügen eine weitere Funktion, die der Taste, die Sie entscheiden, eine andere option:

Ich habe zum Beispiel einen anderen Schalter Komponente(könnte so etwas wie checkbox oder radio-button etc.) als "Graf toggle", die, wenn aktiviert, die LikeToggleButton ' s Taste Hinzugefügt werden, eine andere onClick-handler, die anfangen zu zählen Zeiten der button geklickt wurde, ich weiß, es könnte sein, predesignd in der toggle-Funktion, aber ich Frage mich nur, wenn es einen Weg gibt, zum Anhängen dieses Teil zu onClick-handler?

Dank

InformationsquelleAutor Kuan | 2015-10-28
  1. 6

    Wenn Sie wollen, um mehrere callbacks ausgeführt, wenn onClick ausgelöst wird, können Sie Ihnen übergeben von außen, so dass Sie Zugang zu Ihnen haben, in der Requisiten-Objekt. Dann führen Sie alle (Hinweis: code nicht getestet):

    var LikeToggleButton = React.createClass({

    toggle: function() {
        this.setState({liked:!like});
    },

    handleClick: function(e) {
        e.preventDefault();
        this.toggle();
        for (var i=0, l<this.props.callbacks.length; i<l; i++) {
           this.props.callbacks[i].call();
        }
    },

    render: function() {            
        return (
            <div onClick={this.handleClick}>TOGGLE LIKE</div>  
        );
    }
});

    ABER, wenn Sie wollen, um die Komponenten miteinander verbunden sind, die Sie nicht tun sollten, dass durch das aufrufen von Methoden innerhalb Handler. Stattdessen sollten Sie die Verwendung eines Entwurfsmusters, wo Flux ist die offensichtliche Wahl, (aber es gibt noch viel mehr).

    Werfen Sie einen Blick auf Flux, und hier haben Sie mehr Auswahl.

    • Danke, das ist eine gute Idee, eine Sache klar: in diesem.Requisiten.Rückrufe, wie weiß ich, welche Funktion neu Hinzugefügt für das CLICK-Ereignis?
    • Jedes mal, wenn die Komponente gerendert wird, es erhält eine neue callbacks array so, dass nicht die Materie.
    • Danke, ich bin ziemlich neu, um zu Reagieren. Wo sollte ich den callbacks-array?
    • übergeben Sie es, wenn die Komponente erzeugt wird: <LikeToggleButton callbacks={callbacksArray} />. Ich empfehle Ihnen, Lesen Sie die reagieren docs gezielt.
    • Danke, ich meine, wenn ich append new-handler-Funktion(es könnte sein-handler für das klicken oder für andere) in callbacks, wie Sie tun ich weiß, es ist für das click-Ereignis? Also ich denke, ich sollte Fragen, sollte es mehrere Rückruf-arrays für die engagierte event-handling?
    InformationsquelleAutor gontrollez
  2. 2

    Für eine erweiterbare Art und Weise, die macht es nicht erforderlich, die Komponente wissen über Komponenten, die Sie verwenden - speichern Sie das onClick-Ereignis, bevor Sie es ändern.
    Dies ist highlights extrahiert aus der tatsächlichen Arbeitszeit-code:

    Taste.jsx

    class Button extends React.Component {

  constructor(props) {
    super(props);
    this.state= { callback: false};
  }

  click(){
    //do stuff here
    if(this.state.callback) { this.state.callback.call(); }
  }

  render () {
    this.state.callback = this.props.onClick; //save the onClick of previous handler

    return (
      <button { ...this.props } type={ this.props.type || "button" } onClick={ this.click.bind(this) } className = this.props.className } >
        { this.props.children }
      </button>
    );
  }
}
export default Button;

    Dann in einer anderen Komponente Sie können die Schaltfläche verwenden, und es kann über einen eigenen onClick-handler:

    class ItemButtons extends React.Component {
  itemClick () {
    //do something here;
  }

render () {
    const buttons = [
      (
          <Button onClick={ this.itemClick.bind(this) } className="item-button">
            <span>Item-Button</span>
          </Button>
      )
    ];

    return (<section>{ buttons }</section>);
}

export default ItemButtons;
    InformationsquelleAutor David Fridley
  3. 0

    add-multiple-event-Handler-zu-gleiche-event-in-reagieren

    Vielleicht Sie die Einstellung multi-click-Handler auf das gleiche Ziel!

    https://gist.github.com/xgqfrms-GitHub/a36b56ac3c0b4a7fe948f2defccf95ea#gistcomment-2136607

    jsx

<div style={{ display: 'flex' }}>
    <div style={{
            width: '270px',
            background: '#f0f0f0',
            borderRight: "30px solid red",
            minHeight: ' 500px',
            maxHeight: '700px',
            overflowX: 'hidden',
            overflowY: 'scroll',
        }}
        onClick={this.state.ClickHandler}
        onClick={this.stateHandleClick}
        className="sidebar-btn"
        >
        <button onClick={this.props.ClickHandler}>props</button>
        <button onClick={(e) => this.props.ClickHandler}>props</button>
        <button onClick={this.props.ClickHandler}>props</button>
        <button onClick={this.state.ClickHandler}>state</button>
 //...
</div>
    InformationsquelleAutor
  4. -1

    Gruppe mehrere Aktionen für ein Ereignis

    onMouseDown={(e) => { e.stopPropagation(); alert('hello'); }}
    • das wird zu einer nutzlosen DOM-updates, weil onMouseDown wird eine neue Funktion auf jedem render
    InformationsquelleAutor R.Meredith
Schreibe einen Kommentar