刷新子组件更改时的应用状态
Refreshing App State on Child Component Change
我有一个元素列表。 当我单击向上或向下图标时,我希望列表重新排列,最后,应用程序重新呈现自身,以便我可以看到 DOM 中反映的更改。
更改列表位置有效。 尝试运行refreshState
方法时遇到问题。 我将函数作为子属性传递,但调用该属性返回未定义的函数。
问:如何从组件的子组件调用组件的方法?
法典:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<style>
/* CSS */
span {
margin:0 0 0 10px;
}
</style>
<div id="app"></div>
<script type="text/jsx">
// React
var _data = ['Red', 'Blue', 'Green'];
function getState() {
return {
colors: _data,
}
};
Array.prototype.swap = function(a, b) {
var temp = this[a];
this[a] = this[b];
this[b] = temp;
};
var App = React.createClass({
getInitialState: function() {
return getState();
},
render: function() {
var colors = this.state.colors.map(function(color) {
return (
<Color name={color} refreshState={this.refreshState} />
)
});
return (
<ul>{colors}</ul>
)
},
refreshState: function() {
return this.setState(getState());
},
});
var Color = React.createClass({
moveUp: function() {
var current = _data.indexOf(this.props.name),
above = current - 1;
if (above >= 0) {
_data.swap(current, above);
}
return this.props.refreshState();
},
moveDown: function() {
var current = _data.indexOf(this.props.name),
below = current + 1;
if (below < _data.length) {
_data.swap(current, below);
}
return this.props.refreshState();
},
render: function() {
return (
<li>
<strong>{this.props.name}</strong>
<span onClick={this.moveUp}>^</span>
<span onClick={this.moveDown}>v</span>
</li>
)
},
});
React.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
注意到您已经解决了这个问题,但我想我会提到您可以将作用域传递给 .map,这意味着无需为描述的目的缓存作用域:
this.state.colors.map(function(color) {
return (
<Color
key={_data.indexOf(color)}
name={color}
refresh={this.refreshState}
/>
)
}, this); // pass the scope to .map
我试图在map
方法中调用this.refreshState
。 当然,这与render
方法的范围不同。 解决方案是将范围存储在变量中:
var refresh = this.refreshState;
然后在map
方法中使用该变量:
... refreshState={refresh} ...
始终注意您的范围!
如果有多个函数不在局部范围内,则可以将this
存储在变量中。
var self = this;
z.map(function(arg) {
x={self.refreshState} y={self.otherThing}
对于好奇的人来说,最终结果:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<style>
/* CSS */
span {
margin:0 0 0 10px;
}
</style>
<div id="app"></div>
<script type="text/jsx">
// React
var _data = ['Red', 'Blue', 'Green'];
function getState() {
return {
colors: _data,
}
};
Array.prototype.swap = function(a, b) {
var temp = this[a];
this[a] = this[b];
this[b] = temp;
};
var App = React.createClass({
getInitialState: function() {
return getState();
},
refreshState: function() {
return this.setState(getState());
},
render: function() {
var self = this;
var colors = this.state.colors.map(function(color) {
return (
<Color
key={_data.indexOf(color)}
name={color}
refresh={self.refreshState}
/>
)
});
return (
<ul>{colors}</ul>
)
},
});
var Color = React.createClass({
propTypes: {
name: React.PropTypes.string,
refresh: React.PropTypes.func.isRequired,
},
moveUp: function() {
var current = _data.indexOf(this.props.name),
above = current - 1;
if (above >= 0) {
_data.swap(current, above);
}
return this.props.refresh();
},
moveDown: function() {
var current = _data.indexOf(this.props.name),
below = current + 1;
if (below < _data.length) {
_data.swap(current, below);
}
return this.props.refresh();
},
render: function() {
return (
<li>
<strong>{this.props.name}</strong>
<span onClick={this.moveUp}>^</span>
<span onClick={this.moveDown}>v</span>
</li>
)
},
});
React.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
相关文章:
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- Web应用程序,将成员状态更新为其他成员
- 在通知点击时使用Ion中的OneSignal插件路由到应用程序中的状态
- 使用应用程序状态js和视图在angular js url上传递两个参数
- 来自应用程序状态的Jquery数据表源
- 检测Ionic中特定的应用程序状态变化
- 在基于Strophe.js的聊天应用程序中处理状态
- 如何保持JavaScript web应用程序的状态
- 在angular js中,每次应用程序进入状态时,重新加载状态的最佳方式是什么
- 在用于SEO的Marionette应用程序中使用推送状态
- 使用AsyncStorage实例化持久应用程序状态
- 如何在React应用程序中处理权限检查(Redux中的状态维护)
- 如何在类似Om的不可变应用程序状态下对关系数据进行建模
- 如何在AngularJS$rootScope事件侦听器中应用状态转换
- 我如何才能进入一个完整的角度状态应用程序
- Chrome应用程序:无法检索文件加载状态
- 刷新子组件更改时的应用状态
- 如何在 ThreeJS 中应用矩阵转换并将结果设置为默认状态
- 如何将同步 ajax 调用替换为凭据以保持应用状态稳定
- 如何响应应用状态更改?(反应原生)