React.js双向绑定：valueLink中的两层深层路径 [英] React.js 2-way bindings: two-levels deep path in valueLink

问题描述

我的状态是：

[
  {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 的深度路径非常酷，所以我尝试实现它。

代码：https://gist.github.com/tungd/8367229

用法： http://jsfiddle.net/uHm6k/3/

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： http：// jsfiddle.net/srbGL/

Here is working JSFiddle: http://jsfiddle.net/srbGL/

这篇关于React.js双向绑定：valueLink中的两层深层路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！