事件摘要:
我单击编辑按钮。
editForm()使用此.setState()和render()中的此.state显示表单。
上面的setState()将{this.state}作为我需要显示的值。
一旦我在表单中单击更新按钮,updateMessage()将激活,哪个Meteor.call包含回调选项。
这个回调函数有一个.setState()连接到我上面提到的{This.state}。
那么如何使{This.state}显示在Meteor.call()回调和setState()之后呢?
将{this.state}放入渲染()将在回调后显示。
下面是代码:我需要显示的是this.state.show\u error\u或\u noerror inside 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>
)
}
}
要在meteor中实现反应,请创建Tracker.dependency对象并使渲染依赖于它(参考)。
在构造函数中创建依赖项
var dep = new Tracker.Dependency;
让你的渲染依赖于它
dep.depend();
并在setState函数中调用它
dep.changed();
问题内容: 从React DOCS: https://reactjs.org/docs/state-and- lifecycle.html 状态更新可能是异步的 React可以将多个setState()调用批处理到单个更新中以提高性能。 这是完全合理的。如果您具有类似下面的功能,则在每次调用时重新渲染效率很低 因此,在上述情况下,我期望React将所有3个调用分批处理成一个单独的重新渲染。而它确实
首先,我尝试检查用户的id是否与DB中的ID匹配。如果是这样,那么为和设置一个新状态,但我收到以下警告
问题内容: 我正在尝试使用setState()方法将容器中的React状态变量重置为默认值。但是出现以下错误 最后:超出最大调用堆栈大小。 我的代码如下: 当Redux状态的变量为true时,我正在调用resetMsg()。 我在其中调用resetMsg的代码(resetMessages的值最初为false,当它为true时,我需要重置React状态): 问题答案: 您可能要研究功能。根据官方文档
我有一个带有两组按钮(功能和目标)的界面。当我点击一个按钮时,我希望它从一个团队转到另一个团队。我正在用react和redux实现这一点。我唯一的问题是,当状态更新并且我成功地记录了更新的状态时,除非我使用forceUpdate(),否则组件不会更新。我不明白的是,既然状态更新成功,组件不应该自动重新渲染吗? 一些js 正如您所看到的,当我单击一个按钮时,我触发updateLists函数,该函数将
我正在用反应原生构建一个项目。我有一个动态的玩家列表,我希望用户能够编辑。 我想实现的是: 用户输入名称 用户按enter键 我们称之为addPlayer,它添加一个播放器 新的输入出现并得到关注(通过其他功能) 我得到的是: < li >用户输入姓名 < li >用户按enter键 < li >我们调用addPlayer来添加播放器 < li >键盘开始关闭一会儿,然后在新输入出现时重新打开。
所以我有这个: 只是一个数组的数字例如然而没有给出正确的总数,但?我甚至放了一个超时延迟,看看这是否解决了问题。任何明显的还是我应该发布更多的代码?