13

ngReact を使用して、どのように双方向のデータ バインディングをエレガントにセットアップするのでしょうか?

valueと発火する単純な React 入力コンポーネントがあるとしますonChange。

angular.module('app', []).value('SimpleInput', props => 
  <input type='text' 
         value={props.value}
         onChange{e => props.onChange(e.target.value)} />
)

value次に、AngularJS 側から、次のようなものがスコープ内で更新されることを期待します。

<react-component name="SimpleInput" 
                 props="{value: value, onChange: v => value = v}">
</react-component>

しかし、AngularJS スコープへの双方向バインディングを設定するよりエレガントなng-model方法はありますか?

4

2 に答える 2

0

私は ngReact の経験があまりありませんが、React で行う方法は、ref を使用し、必要なときに ref から値を取得することです。コンポーネントコードがどのように見えるかはわかりませんので、推測することしかできません。コンポーネント内に入力フィールドがある場合は、次のようにします。

var SimpleInput = React.createClass({

accessFunc: function(){
    //Access value from ref here.
    console.log(React.findDOMNode(this.refs.myInput).value);
},

render: function(){
    return (
        <input type="text" ref="myInput" />
    )
  }
})

ただし、linkState を使用して値を状態変数にバインドすることもできます: https://facebook.github.io/react/docs/two-way-binding-helpers.html

ただし、最初の方法を使用することを強くお勧めします。React が Angular よりもはるかに高速である理由の 1 つは、双方向バインディングを回避するためです。それでも、方法は次のとおりです。

var SimpleInput = React.createClass({

getInitialState: function(){
    return {
        myInput: ''
    }
},

render: function(){
    return (
        <input type="text" valueLink={this.linkState('myInput')}/>
    )
  }
})

これで、this.state.myInput にアクセスするたびに、入力ボックスの値が取得されます。

于 2015-07-15T18:45:13.947 に答える