2017-03-09 18 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()'。它仍然没有退缩,所以它不是流星问题。我使用反应来修复它。 –

相关问题