React.js双向绑定: valueLink中的两级深度路径
我的状态是：
[
{type: "translateX", x: 10},
{type: "scaleX", x: 1.2}
]我正在使用Two-Way Binding Helpers，但无法为linkState提供有效的密钥字符串
this.state.map(function(item, i) {
return <div><input valueLink={this.linkState( ??? )}></div>
}如果this.linkState接受一些查询语法，比如"0.type"来从我的示例中检索"translateX"，那就更好了。
有什么变通方法吗？
我编写了，它是React.addons.LinkedStateMixin的临时替代品。使用示例：
this.state.map(function(item, i) {
return <div><input valueLink={this.linkState([i, "x"])}></div>
}linkState("0.x")也是可接受的语法。
回答 6
Stack Overflow用户
发布于 2014-01-11 11:42:28
编辑：
我意识到LinkedState的深度路径非常酷，所以我尝试实现它。
代码：https://gist.github.com/tungd/8367229
用法：http://jsfiddle.net/uHm6k/3/
正如文档所述，LinkedState是onChange/setState的包装器，用于简单的情况。您可以随时编写完整的onChange/setState来实现您想要的功能。如果你真的想坚持使用LinkedState，你可以使用非混合版本，例如：
getInitialState: function() {
return { values: [
{ type: "translateX", x: 10 },
{ type: "scaleX", x: 1.2 }
]}
},
handleTypeChange: function(i, value) {
this.state.values[i].type = value
this.setState({ values: this.state.values })
},
render: function() {
...
this.state.values.map(function(item, i) {
var typeLink = {
value: this.state.values[i].type,
requestChange: this.handleTypeChange.bind(null, i)
}
return <div><input valueLink={typeLink}/></div>
}, this)
...
}这是一个有效的JSFiddle：http://jsfiddle.net/srbGL/
Stack Overflow用户
发布于 2014-01-25 23:07:23
如果基础混入不能满足您的要求，您可以实现自己的混入。
看看这个混合是如何实现的：
var LinkedStateMixin = {
/**
* Create a ReactLink that's linked to part of this component's state. The
* ReactLink will have the current value of this.state[key] and will call
* setState() when a change is requested.
*
* @param {string} key state key to update. Note: you may want to use keyOf()
* if you're using Google Closure Compiler advanced mode.
* @return {ReactLink} ReactLink instance linking to the state.
*/
linkState: function(key) {
return new ReactLink(
this.state[key],
ReactStateSetters.createStateKeySetter(this, key)
);
}
};
/**
* @param {*} value current value of the link
* @param {function} requestChange callback to request a change
*/
function ReactLink(value, requestChange) {
this.value = value;
this.requestChange = requestChange;
}https://github.com/facebook/react/blob/fc73bf0a0abf739a9a8e6b1a5197dab113e76f27/src/addons/link/LinkedStateMixin.js https://github.com/facebook/react/blob/fc73bf0a0abf739a9a8e6b1a5197dab113e76f27/src/addons/link/ReactLink.js
因此，您可以很容易地尝试基于上述内容编写自己的linkState函数。
linkState: function(key,key2) {
return new ReactLink(
this.state[key][key2],
function(newValue) {
this.state[key][key2] = newValue;
}
);
}请注意，我没有使用ReactStateSetters.createStateKeySetter(this, key)。https://github.com/facebook/react/blob/fc73bf0a0abf739a9a8e6b1a5197dab113e76f27/src/core/ReactStateSetters.js通过再次查看源代码，你可以发现这个方法除了创建一个函数和进行很少的缓存优化之外，并没有做太多的事情：
function createStateKeySetter(component, key) {
// Partial state is allocated outside of the function closure so it can be
// reused with every call, avoiding memory allocation when this function
// is called.
var partialState = {};
return function stateKeySetter(value) {
partialState[key] = value;
component.setState(partialState);
};
}所以你绝对应该试着写你自己的混入。如果您的状态中有一个复杂的对象，并且您想要通过对象API修改它，那么这将非常有用。
Stack Overflow用户
发布于 2014-04-17 05:22:54
我没有使用值链接插件。
这是一个演示：http://wingspan.github.io/wingspan-forms/examples/form-twins/
秘诀是只定义一个onChange函数：
onChange: function (path, /* more paths,*/ value) {
// clone the prior state
// traverse the tree by the paths and assign the value
this.setState(nextState);
}像这样使用它：
<input
value={this.state['forms']['0']['firstName']}
onChange={_.partial(this.onChange, 'forms', '0', 'firstName')} />如果您有许多必须到处传递的(value, onChange)对，那么围绕这一点定义一个类似于ReactLink的抽象可能是有意义的，但我个人在没有使用ReactLink的情况下取得了很大进展。
我和我的同事最近开源了wingspan-forms，这是一个帮助处理深度嵌套状态的React库。我们很大程度上利用了这种方法。你可以在github页面上看到更多链接状态的示例演示。
https://stackoverflow.com/questions/21057219
复制相似问题
腾讯云开发者
