與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的雙向數據綁定

回答

相關問題