17

私の状態は次のとおりです。

[
  {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"

回避策はありますか?

React.addons.LinkedStateMixinのドロップイン置換であるDeepLinkState mixinを作成しました。使用例:

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

linkState("0.x")も許容される構文です。

4

6 に答える 6

19

編集：

LinkedStatedeep-path forはかなりクールだと気づいたので、実装してみます。
コード: 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/

于 2014-01-11T03:42:28.410 に答える
1

これは、このようなことを処理する方法を説明するチュートリアルです。

React の状態とフォーム、パート 3: 複雑な状態の処理

TL;DR:

0) 標準リンクを使用しないでください。これらを使用します。

1) 状態を次のように変更します。

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

2) へのリンクを取得collection:

var collectionLink = Link.state( this, 'collection' );

3) その要素へのリンクを繰り返します。

collectionLink.map(function( itemLink, i ) {
  return <div><input valueLink={itemLink}></div>
})
于 2016-06-02T17:24:04.227 に答える
1

私はそれについてブログ投稿を書きました: http://blog.sendsonar.com/2015/08/04/angular-like-deep-path-data-bindings-in-react/

しかし、基本的には、親の「状態」と深いパスを受け入れる新しいコンポーネントを作成したので、余分なコードを書く必要はありません。

<MagicInput binding={[this, 'account.owner.email']} />

JSFiddleもあるので、それで遊ぶことができます

于 2015-08-05T20:10:21.873 に答える