双向数据绑定到ngReact组件

Question

使用ngReact，如何优雅地建立双向数据绑定？

假设我有一个简单的React输入组件，它接受value并触发onChange

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

然后，从AngularJS方面来看，我希望这样的东西能够在范围内更新value：

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

但是，是否有一种更优雅的方法来设置与AngularJS作用域的双向绑定，类似于ng-model。

Answer 1

我不这样认为。ngReact只是将组件注入角度框架的一种方法；React是专门设计的，没有双向数据绑定以提高性能，因此任何实现都必须是一个解决方案。

从马嘴里说：

ngReact是一个角度模块，允许在AngularJS应用程序中使用反作用组件。这样做的动机可能有以下任何一种:您需要比角可以提供更好的性能(双向数据绑定，Object.observe，页面上太多的范围观察者).

Answer 2

我对ngReact没有多少经验，但其反应方式是使用experience，并在需要时从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将值绑定到状态变量。

然而，我强烈建议使用第一种方式，因为反应比角度快得多，因为它避免了双向绑定。不过，以下是如何：

var SimpleInput = React.createClass({

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

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

现在，无论何时访问this.state.myInput，都会得到输入框的值。