ReactJS Zustand einer anderen Klasse durch Requisiten Callback

Question

Ich versuche, Fullcalendar nett mit ReactJS und Bootstrap modal zu machen. Was ich will ist, wann immer Benutzer ein Datum wählen, ein Bootstrap Modal wird mit ausgewählten Datum erscheinen.

https://jsfiddle.net/16j1se1q/1/ 

Dies ist mein Code

class Application extends React.Component { 
    render() { 
     return (
      <FullCalendar /> 
     ); 
    } 
} 

class FullCalendar extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {view: {showModal: false}}; 
    } 

    handleHideModal(){ 
     this.setState({view: {showModal: false}}) 
    } 

    handleShowModal(){ 
     this.setState({view: {showModal: true}}) 
    } 

    render() { 
     return (
      <div> 
       <div is id="calendar" class="bootswatch-flatly"></div> 
       {this.state.view.showModal ? <AppointmentPopup handleHideModal={this.handleHideModal}/> : null} 
      </div> 
     ); 
    } 

    componentDidMount() { 
     var _that = this; 
     $('#calendar').fullCalendar({ 
      /* ... */ 
      dayClick: function(date, jsEvent, view) { 
       /* ... */ 
       _that.handleShowModal(); 
      } 
     }); 
    } 

    componentWillUnmount() { 
     $('#calendar').fullCalendar('destroy'); 
    } 
} 

class AppointmentPopup extends React.Component { 
    htmlTemplate() { 
     return (
      /* ... */ 
     ) 
    } 

    render() { 
     return this.htmlTemplate(); 
    } 

    componentDidMount() { 
     var _that = this; 
     $('.appointment-modal').modal({ 
      show: true, 
      keyboard: false, 
      backdrop: 'static' 
     }).on('hide.bs.modal', function(e) { 
      /* ... */ 
     }); 
     $('.appointment-modal').on('hidden.bs.modal', this.props.handleHideModal); 
    } 
    propTypes:{ 
     handleHideModal: React.PropTypes.func.isRequired 
    } 
} 


ReactDOM.render(<Application />, document.getElementById('app')); 

Meine vollständige Quellcode ist unter: http://pastebin.com/MZbVqYFZ

Es funktioniert gut, bis ich auf ein Datum klicken dann schließen modal. Das Problem wurde verursacht, weil der Status view.showModal nicht geändert wurde. Ich habe den Fehler: this.setState is not a function Es scheint, dass this.props.handleHideModal erfolgreich aufgerufen wurde, aber irgendwie this ist nicht ReactJS Objekt

Answer 1

ReactJS verwendet, um automatisch bind die Komponente auf das Verfahren für Sie. Aber mit es6 Stil-Komponenten sind Sie erwartet, es selbst zu tun, wie in:

render() { 
    return (
     <div> 
      <div is id="calendar" class="bootswatch-flatly"></div> 
      {this.state.view.showModal ? <AppointmentPopup handleHideModal={this.handleHideModal.bind(this)}/> : null} 
     </div> 
    ); 
} 

Answer 2

Ich stimme @ konoufo Vorschlag: Sie benötigen eine Callback-Funktion mit Ihrem Instanzbereich zu binden. Manche Leute bevorzugen es so:

class FullCalendar extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {view: {showModal: false}}; 

     // add this line to your constructor 
     this.handleHideModal = this.handleHideModal.bind(this); 
    } 

    // ... rest of your code 
}