2017-03-09 19 views
0

活動總結:
我點擊編輯按鈕。
editForm()在render()中使用this.setState()和this.state顯示錶單。
上面的setState()將{this.state}作爲我需要顯示的值。
一旦我點擊窗體內的更新按鈕,updateMessage()就會激活,其中包含回調選項的Meteor.call。
此回調函數具有連接到上面提到的{this.state}的this.setState()。

那麼如何在Meteor.call()回調和setState()之後顯示{this.state}?
Meteor-React:如何在Meteor.call回調完成後在setState內的狀態上重新渲染?

-note-將{this.state}放入render()將在回調後顯示。

繼承人代碼:this.state.show_error_or_noerror裏面editMessage()是我需要顯示的。

constructor(props) { 
super(props); 

    const messageContent = this.props.messageContent; 
    const username = this.props.username; 
    const articleTitle = this.props.articleTitle; 

    this.state = { 
     show_error_or_noerror: '', 
     messageContent: messageContent, 
     username: username, 
     articleTitle: articleTitle 
    }; 

    this.editMessage = this.editMessage.bind(this); 
    this.updateMessage = this.updateMessage.bind(this); 

    } 
    updateMessage(event) { 
    event.preventDefault(); 

    const messageId = this.props.messageId; 
    const messageContent = this.refMessage.value.trim(); 

    Meteor.call('message.update', messageId, messageContent, (error) => { 
     if(error) { 
     this.setState({show_error_or_noerror: error.reason}); 
     } else { 
     this.setState({show_error_or_noerror: 'Updated successfully.'}); 
     } 
    }); 
    } 
    editMessage(event) { 
    event.preventDefault(); 

    const messageId = this.props.messageId; 

    this.setState({ 
     ['show_form'+messageId]: <form onSubmit={this.updateMessage}> 
     <textarea 
      ref={(textarea) => {this.refMessage = textarea;}} 
      defaultValue={this.state.messageContent} 
     /> 
     <h6>by {this.state.username}</h6> 
     <h6>Article: {this.state.articleTitle}</h6> 
     <button type="submit">Update</button> 
     <button onClick={this.hideForm}>Hide</button> 
     {this.state.show_error_or_noerror} 
     </form> 
    }); 
    } 
    render() { 
    const messageId = this.props.messageId; 

    return (
     <span className="message_updator"> 
     <button onClick={this.editMessage}>Edit</button> 
     {this.state['show_form'+messageId]} 
     </span> 
    ) 
    } 
} 

回答

0

要實現流星反應,創建一個Tracker.dependency對象,有你的渲染依賴於它(ref)。

在構造函數

var dep = new Tracker.Dependency; 

創建的依賴,讓你的渲染依賴於它

dep.depend(); 

並稱之爲你的setState功能

dep.changed(); 
+0

我把'DEP =新Tracker.Dependency;'作爲構造函數內的全局變量。
我把'dep.depend();'render()裏面。
我把'dep.changed()'放在'Meteor.call'回調的if else語句中。
注意到已更改。 –

+0

我認爲這個問題與Meteor.call設計只能運行一次。這裏有兩個用於響應式流星調用的軟件包[流星響應方法](https://github.com/stubailo/meteor-reactive-method)和[流星調用](https://github.com/mnmtanish/meteor-調用/) – mutdmour

+0

我刪除了'Meteor.call()',只使用'this.setState()'。它仍然沒有退縮,所以它不是流星問題。我使用反應來修復它。 –

相關問題