与ngReact的双向数据绑定

使用ngReact，如何优雅地实现双向数据绑定？与ngReact的双向数据绑定

比方说，我有一个简单的React输入组件，它需要一个value并调用onChange。

angular.module('app', []).value('SimpleInput', React.createClass({ 
    handleChange: function(e) { 
    this.props.onChange(e.target.value); 
    }, 
    render: function() { 
    return React.createElement('input', {type: 'text', value: this.props.value, onChange: this.handleChange}); 
    } 
}));

然后我希望这样的事情来更新范围value。

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

然而，有自动/更优雅的方式？

来源

2015-07-09 Peter V

我不这么认为。 ngReact只是将React组件注入Angular框架的一种手段;反应是特别是旨在不具有双向数据绑定有利于性能，所以任何实现这将必然是一个解决方法。

从马的嘴：

ngReact是一个角模块，允许反应的组分在AngularJS应用中使用。对此的动机可能是以下任何一种：您需要比Angular更高的性能（双向数据绑定，Object.observe，页面上的观察者太多）...

来源

2015-07-15 02:09:50

我没有有很多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" /> 
    ) 
    } 
})

但是，您也可以使用链路状态绑定值状态变量：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-15 18:45:13 madebysid

与ngReact的双向数据绑定

回答

相关问题