React.js 2路绑定：valueLink中的两级深度路径

小编典典

React.js 2路绑定：valueLink中的两级深度路径

reactjs

我的状态是：

[
  {type: "translateX", x: 10},
  {type: "scaleX", x: 1.2}
]

我正在使用双向绑定帮助器，并且无法为以下项提供有效的密钥字符串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") 也是可接受的语法。

阅读 293

2020-07-22

共1个答案

小编典典

编辑：

我意识到for的深路径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/

2020-07-22