Reactjs, Onclick-Funktion ist Auto-Trigger

Question

Ich lerne Reactjs. Sagen wir, ich habe eine Schaltfläche, und auf dieser Schaltfläche trigger ich ein Ereignis. Aber irgendwie nennt dieses Ereignis immer Ereignis Ich klicke nichts. Unten ist mein Code, kannst du mir helfen? Nehmen wir an, ich rufe eine API mit Ajax auf, wenn ich Daten habe, aktualisiere ich die Benutzeroberfläche. In UI habe ich einen Button und er löst auch ein Event aus.

"use strict"; 

var Movie = React.createClass({ 
    displayName: "Movie", 

    getInitialState: function getInitialState() { 
     return { 
      movie_sessions: this.props.movie_session, 
      movie: this.props.movie, 
      rooms: this.props.rooms 
     }; 
    }, 

    render: function render() { 
     return React.createElement(
      "div", 
      { style: column }, 
      React.createElement(
       "a", 
       null, 
       this.state.movie.name 
      ), 
      React.createElement(
       "div", 
       { style: slide }, 
       React.createElement(
        "ul", 
        null, 
        this.state.movie_sessions.map(function (movie_session) { 
         return React.createElement(MovieSession, { 
          key: movie_session.id, 
          room_id: movie_session.room_id, 
          date_time: movie_session.date_time 
         }); 
        }) 
       ) 
      ), 
      React.createElement(
       "div", 
       { style: main }, 
       React.createElement(Seats, null) 
      ) 
     ); 
    } 
}); 

var MovieSession = React.createClass({ 
    displayName: "MovieSession", 

    loadRoomFromServer: function loadRoomFromServer() { 
     $.ajax({ 
      url: "/rooms/" + this.state.room_id + ".json", 
      dataType: 'json', 
      success: function (data) { 
       this.setState({ room: data }); 
      }.bind(this), 
      error: function (xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
      }.bind(this) 
     }); 
    }, 
    loadSeatFromServer: function loadSeatFromServer() { 
     console.log("click"); 
     $.ajax({ 
      url: "/seats.json", 
      dataType: 'json', 
      success: function (data) { 
       //I want to update state for Seat 
      }.bind(this), 
      error: function (xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
      } 
     }); 
    }, 
    getInitialState: function getInitialState() { 
     return { 
      key: this.props.key, 
      room_id: this.props.room_id, 
      date_time: this.props.date_time 
     }; 
    }, 
    componentDidMount: function componentDidMount() { 
     this.loadRoomFromServer(); 
     setInterval(this.loadRoomFromServer, 2000); 
    }, 

    render: function render() { 
     if (this.state.room) { 
      return React.createElement(
       "div", 
       null, 
       React.createElement(
        "li", 
        null, 
        this.state.room.name, 
        " " 
       ), 
       React.createElement(
        "p", 
        null, 
        " ", 
        this.state.date_time 
       ), 
       React.createElement(
        "button", 
        {onclick: this.loadSeatFromServer()}, 
        "Choose" 
       ) 
      ); 
     } else { 
      return React.createElement(
       "h3", 
       null, 
       "loading" 
      ); 
     } 
    } 
}); 

Answer 1

Anstatt das Verfahren zu nennen, sollten Sie nur die Referenz des Verfahrens im Fall onClick zuordnen

React.createElement(
       "button", 
       {onclick: this.loadSeatFromServer}, 
       "Choose" 
      ) 

Answer 2

Sie haben zwei Fehler im Code. Event-Handler sollte CamelCase sein, z.B. onClick anstelle von Kleinbuchstaben onclick; Und, wie Phi Nguyen sagte, sollten Sie die Funktion selbst übergeben, nicht das Ergebnis des Funktionsaufrufs.

React.createElement(
    "button", 
    {onClick: this.loadSeatFromServer}, 
    "Choose" 
) 

In Ihrem ursprünglichen Code, führen Sie loadSeatFromServer durch loadSeatFromServer() Aufruf, dann den Rückgabewert zuweisen, undefined zu einer Stütze onclick, die nie verwendet wird.

Im richtigen Code, Sie nicht ausführen loadSeatFromServer (keine () nach dem Funktionsnamen), aber die Funktion selbst zu einem Standard-Event-Handler-prop zuweisen, onClick - und wenn die Komponente geklickt wird, reagieren es auszuführen.

Answer 3

Die beste Lösung hierfür ist das Objekt, das Sie wollen wie

self = this 

...

onClick={self.coolFunction.bind(this)} 

und

coolFunction() { 
    console.log(this.someDataInside); 
} 

Answer 4

erste Änderung zu binden diese: ... loadSeatFromServer: function loadSeatFromServer() { ... }, ...

zu

loadSeatFromServer: function() { ... },

Sekunde: React.createElement( "button", {onclick: this.loadSeatFromServer()}, "Choose" )

zu

React.createElement( "button", {onclick: this.loadSeatFromServer}, "Choose" )