13

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

假设我有一个简单的 React 输入组件，它需要 avalue和 fires 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？

4

2 回答 2

6

我不这么认为。ngReact 只是将 React 组件注入 Angular 框架的一种方式；React专门设计为没有双向数据绑定以提高性能，因此任何实现都必然是一种变通方法。

从马口中：

ngReact是一个 Angular 模块，它允许在 AngularJS 应用程序中使用 React 组件。这样做的动机可能是以下任何一种：您需要比 Angular 提供的性能更高的性能（双向数据绑定，Object.observe，页面上的范围观察者太多）......

于 2015-07-15T02:09:50.543 回答
0

我对 ngReact 没有太多经验，但 React 的做法是使用 refs，并在需要时从 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 快得多的原因之一是它避免了双向绑定。不过，方法如下：

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 回答