问题描述
我的状态是:
[
{type: "translateX", x: 10},
{type: "scaleX", x: 1.2}
]
使用,我无法提供有效的密钥字符串对于 linkState
:
I’m using Two-Way Binding Helpers and I can’t provide a valid key string for linkState
:
this.state.map(function(item, i) {
return <div><input valueLink={this.linkState( ??? )}></div>
}
如果 this.linkState
接受一些查询语法,例如0.type
从我的示例中检索translateX
。
Would be nice if this.linkState
accepted some query syntax, such as "0.type"
to retrieve "translateX"
from my example.
有没有解决方法?
我写了 DeepLinkState mixin ,它是React.addons.LinkedStateMixin的替代品。用法示例:
I wrote DeepLinkState mixin which is a drop-in replacement for React.addons.LinkedStateMixin. Usage example:
this.state.map(function(item, i) {
return <div><input valueLink={this.linkState([i, "x"])}></div>
}
linkState(0.x)
也是可接受的语法。
linkState("0.x")
is also acceptable syntax.
推荐答案
编辑:
我意识到 LinkedState
的深度路径非常酷,所以我尝试实现它。
代码:
用法:
I realized that deep-path for LinkedState
is pretty cool so I try to implement it.
The code: https://gist.github.com/tungd/8367229
Usage: http://jsfiddle.net/uHm6k/3/
正如文件所述, LinkedState
是围绕 onChange / setState
的一个包装,意味着简单的例子。您可以随时写入完整的 onChange / setState
,以达到您想要的目的。如果你真的想坚持使用 LinkedState
,你可以使用非mixin版本,例如:
As the document stated, LinkedState
is a wrapper around onChange/setState
and meant for simple case. You can always write the full onChange/setState
to achieve what you want. If you really want to stick with LinkedState
, you can use the non mixin version, for example:
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:
Here is working JSFiddle: http://jsfiddle.net/srbGL/
这篇关于React.js双向绑定:valueLink中的两层深层路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!