React.js:管理状态和组件重新提交
React.js: Managing State and Component Rerender
当我用React.js开始冒险时,我遇到了一堵墙。我有以下时间跟踪应用程序的UI可以在几个级别上工作:
http://jsfiddle.net/technotarek/4n8n17tr/
如所愿:
- 根据用户输入进行筛选
- 项目时钟可以独立启动和停止
什么不起作用:
- 如果启动一个或多个时钟,然后尝试进行筛选,则任何不在筛选结果集中的时钟都会在重新显示后重置。(只需单击所有时钟的开始,然后搜索项目,然后清除搜索输入即可。)
我认为发生这种情况是因为setState是在过滤器输入的Change上运行的,它正在重新呈现所有内容并使用时钟getInitialState值。
那么,当过滤器重新渲染组件时,保持这些时钟和按钮的"状态"的正确方法是什么?我不应该将时钟或按钮的"状态"存储为真正的React状态吗?在重新渲染之前,我是否需要一个函数来显式保存时钟值?
我没有要求任何人修改我的代码。相反,我希望能找到一个指针,指出我对React的理解正在失败的地方。
为了满足SO的代码需求,下面是包含时间跟踪器中每一行的组件。时钟通过toggleClock启动。IncrementClock写入由搜索筛选器清除的状态。请参阅上面fiddle链接中的完整代码。
var LogRow = React.createClass({
getInitialState: function() {
return {
status: false,
seconds: 0
};
},
toggleButton: function(status) {
this.setState({
status: !this.state.status
});
this.toggleClock();
},
toggleClock: function() {
var interval = '';
if(this.state.status){
// if clock is running, pause it.
clearInterval(this.interval);
} else {
// otherwise, start it
this.interval = setInterval(this.incrementClock, 1000);
}
},
incrementClock: function() {
this.setState({ seconds: this.state.seconds+1 });
},
render: function() {
var clock = <LogClock seconds={this.state.seconds} />
return (
<div>
<div className="row" key={this.props.id}>
<div className="col-xs-7"><h4>{this.props.project.title}</h4></div>
<div className="col-xs-2 text-right">{clock}</div>
<div className="col-xs-3 text-right"><TriggerButton status={this.state.status} toggleButton={this.toggleButton} /></div>
</div>
<hr />
</div>
);
}
})
过滤时,将从渲染输出中删除LogRow
组件-发生这种情况时,React将卸载组件并处理其状态。当您随后更改过滤器并再次显示一行时,您将获得一个全新的LogRow
组件,因此getInitialState()
将被再次调用。
(这里也有泄漏,因为当使用componentWillUnmount()
生命周期挂钩卸载这些组件时,您没有清除间隔-这些间隔仍然在后台运行)
为了解决这个问题,您可以将计时器状态以及控制和递增它的方法从LogRow
组件中移出,因此它的工作只是显示和控制当前状态,而不是拥有它
您当前正在使用LogRow
组件将项目计时器的状态和行为联系在一起。您可以将这种状态和行为管理转移到将以相同方式管理它的父组件,也可以转移到另一个对象中,例如:
function Project(props) {
this.id = props.id
this.title = props.title
this.ticking = false
this.seconds = 0
this._interval = null
}
Project.prototype.notifyChange = function() {
if (this.onChange) {
this.onChange()
}
}
Project.prototype.tick = function() {
this.seconds++
this.notifyChange()
}
Project.prototype.toggleClock = function() {
this.ticking = !this.ticking
if (this.ticking) {
this.startClock()
}
else {
this.stopClock()
}
this.notifyChange()
}
Project.prototype.startClock = function() {
if (this._interval == null) {
this._interval = setInterval(this.tick.bind(this), 1000)
}
}
Project.prototype.stopClock = function() {
if (this._interval != null) {
clearInterval(this._interval)
this._interval = null
}
}
由于所使用的clearInterval
是一个外部更改源,您需要以某种方式订阅它们,因此我实现了注册单个onChange
回调的功能,LogRow
组件在下面的代码段中安装时就是这样做的。
下面的工作代码片段做了最简单、最直接的事情来实现这一点,因此该解决方案有一些不鼓励的做法(修改道具)和注意事项(一个项目上只能有一个"监听器"),但它是有效的。(这通常是我对React的经验——它首先起作用,然后你把它做得"正确")。
下一步可能是:
PROJECTS
实际上是一个单例Store
——您可以将其作为一个对象,允许注册侦听器以更改项目状态。然后,您可以添加一个Action对象来封装对项目状态的触发更改,这样LogRow
就不会直接接触其project
属性,只从中读取并横向调用Action来更改它。(这只是间接的,但有助于思考数据流)。请参阅react trainig repo中的"不太简单的通信"示例,以获取此方面的工作示例- 通过在更高级别上侦听所有项目更改并在更改时重新呈现所有内容,可以使
LogRow
完全变笨。将单个项目道具传递给LowRow
将允许您实现shouldComponentUpdate()
,因此只有需要显示更改的行才能真正重新呈现
<meta charset="UTF-8">
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div id="worklog" class="col-md-12">
</div>
</div>
</div>
<script type="text/jsx;harmony=true">void function() { "use strict";
/* Convert seconds input to hh:mm:ss */
Number.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;
}
function Project(props) {
this.id = props.id
this.title = props.title
this.ticking = false
this.seconds = 0
this._interval = null
}
Project.prototype.notifyChange = function() {
if (typeof this.onChange == 'function') {
this.onChange()
}
}
Project.prototype.tick = function() {
this.seconds++
this.notifyChange()
}
Project.prototype.toggleClock = function() {
this.ticking = !this.ticking
if (this.ticking) {
this.startClock()
}
else {
this.stopClock()
}
this.notifyChange()
}
Project.prototype.startClock = function() {
if (this._interval == null) {
this._interval = setInterval(this.tick.bind(this), 1000)
}
}
Project.prototype.stopClock = function() {
if (this._interval != null) {
clearInterval(this._interval)
this._interval = null
}
}
var PROJECTS = [
new Project({id: "1", title: "Project ABC"}),
new Project({id: "2", title: "Project XYZ"}),
new Project({id: "3", title: "Project ACME"}),
new Project({id: "4", title: "Project BB"}),
new Project({id: "5", title: "Admin"})
];
var Worklog = React.createClass({
getInitialState: function() {
return {
filterText: '',
};
},
componentWillUnmount: function() {
this.props.projects.forEach(function(project) {
project.stopClock()
})
},
handleSearch: function(filterText) {
this.setState({
filterText: filterText,
});
},
render: function() {
var propsSearchBar = {
filterText: this.state.filterText,
onSearch: this.handleSearch
};
var propsLogTable = {
filterText: this.state.filterText,
projects: this.props.projects
}
return (
<div>
<h2>Worklog</h2>
<SearchBar {...propsSearchBar} />
<LogTable {...propsLogTable} />
</div>
);
}
});
var SearchBar = React.createClass({
handleSearch: function() {
this.props.onSearch(
this.refs.filterTextInput.getDOMNode().value
);
},
render: function() {
return (
<div className="form-group">
<input type="text" className="form-control" placeholder="Search for a project..." value={this.props.filterText} onChange={this.handleSearch} ref="filterTextInput" />
</div>
);
}
})
var LogTable = React.createClass({
render: function() {
var rows = [];
this.props.projects.forEach(function(project) {
if (project.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) === -1) {
return;
}
rows.push(<LogRow key={project.id} project={project} />);
}, this);
return (
<div>{rows}</div>
);
}
})
var LogRow = React.createClass({
componentDidMount: function() {
this.props.project.onChange = this.forceUpdate.bind(this)
},
componentWillUnmount: function() {
this.props.project.onChange = null
},
onToggle: function() {
this.props.project.toggleClock()
},
render: function() {
return <div>
<div className="row" key={this.props.id}>
<div className="col-xs-7">
<h4>{this.props.project.title}</h4>
</div>
<div className="col-xs-2 text-right">
<LogClock seconds={this.props.project.seconds}/>
</div>
<div className="col-xs-3 text-right">
<TriggerButton status={this.props.project.ticking} toggleButton={this.onToggle}/>
</div>
</div>
<hr />
</div>
}
})
var LogClock = React.createClass({
render: function() {
return (
<div>{this.props.seconds.toHHMMSS()}</div>
);
}
});
var TriggerButton = React.createClass({
render: function() {
var button;
button = this.props.status != false
? <button className="btn btn-warning" key={this.props.id} onClick={this.props.toggleButton}><i className="fa fa-pause"></i></button>
: <button className="btn btn-success" key={this.props.id} onClick={this.props.toggleButton}><i className="fa fa-play"></i></button>
return (
<div>
{button}
</div>
);
}
})
React.render(<Worklog projects={PROJECTS} />, document.getElementById("worklog"));
}()</script>
- 提交评论不适用于新添加的帖子
- Ruby On Rails Ajax 提交提交两次
- 提交事件将打开新窗口
- 当以表单形式提交时,是否可以在PHP中访问新的数据* HTML5 / Javascript值?
- 选项卡在新窗口上提交表单,原因
- 提交表单的可能性(左-/中-/在新选项卡或窗口中打开-)单击html链接
- Javascript在新窗口中重新提交具有特定维度的表单
- 在提交时更改按钮颜色,直到输入新文本
- 提交表单后,打开一个新的选项卡
- Facebook-Can't提交新的Open Graph类型,提交为灰色.如何提交
- 如何在新窗口中提交表单,然后重定向父页面
- Javascript表单提交打开新窗口选项卡,然后重定向父页面
- 提交表单,然后打开新窗口并关闭弹出窗口
- 当我单击添加新列按钮时,表单会自动提交
- Ajax 提交重定向到新页面(不应该)
- 每次提交表单时都使用新名称创建对象
- 如何使用“打开新窗口”和“提交”
- 希望使用Angular将表单中的数据作为JSON数组中的新对象提交
- Keyup 13事件重复暗示提交-提交表单上的进入问题
- 通过Enter(特定的提交提交名称)提交