与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; } }" />
然而,有自动/更优雅的方式?
答
我不这么认为。 ngReact只是将React组件注入Angular框架的一种手段;反应是特别是旨在不具有双向数据绑定有利于性能,所以任何实现这将必然是一个解决方法。
从马的嘴:
ngReact是一个角模块,允许反应的组分在AngularJS应用中使用。对此的动机可能是以下任何一种:您需要比Angular更高的性能(双向数据绑定,Object.observe,页面上的观察者太多)...
答
我没有有很多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,你会得到输入框的值。