javascript - React.js 2路绑定(bind):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")会很好。

有什么解决方法吗？

我写了 DeepLinkState mixin ，它是React.addons.LinkedStateMixin的直接替代。用法示例:

this.state.map(function(item, i) {
  return <div><input valueLink={this.linkState([i, "x"])}></div>
}

linkState("0.x")也是可接受的语法。

最佳答案

编辑:

我意识到LinkedState的深路径很酷，因此我尝试实现它。
代码:https://gist.github.com/tungd/8367229
用法:http://jsfiddle.net/uHm6k/3/

如文档所述，LinkedState是onChange/setState的包装，仅用于简单的情况。您始终可以编写完整的onChange/setState来实现所需的功能。如果您确实想使用LinkedState，则可以使用非mixin版本，例如:

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/

关于javascript - React.js 2路绑定(bind):valueLink中的两级深度路径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21057219/