ReactJS通過道具設定另一個類的狀態回調

我試圖讓fullcalendar玩ReactJS和引導模式不錯。我想要的是每當用戶選擇一個日期，一個引導模式將出現與選定的日期。ReactJS通過道具設定另一個類的狀態回調

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

這是我的代碼

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

我的完整的源代碼是：http://pastebin.com/MZbVqYFZ

，直到我點擊日期，然後關閉模式，它工作正常。問題是由於該狀態view.showModal沒有更改而引起的。我得到了錯誤： this.setState is not a function 似乎this.props.handleHideModal成功叫，但不知何故this不是ReactJS對象使用自動bind組件爲你的方法

來源

2016-09-20 Thuong Nguyen

ReactJS。但隨着ES6風格組件你希望自己做，如：

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

來源

2016-09-20 07:14:15 konoufo

謝謝，它現在工作。 –

我同意@ konoufo的建議：你需要你的回調函數與實例綁定的範圍。有人喜歡這樣做：

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 
}

來源

2016-09-20 07:20:30 craftsman

ReactJS通過道具設定另一個類的狀態回調

回答

相關問題