Associazione dati bidirezionale con ngReact

Question

Utilizzando ngReact, come si ottiene in modo elegante l'associazione dati bidirezionale?

Diciamo che ho un semplice componente di input React, prende uno value e chiama onChange con esso.

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}); 
    } 
})); 

Poi mi sarei aspettato qualcosa di simile per aggiornare il value nell'ambito.

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

Tuttavia, c'è un/modo più elegante automatica?

Answer 1

Non credo. ngReact è semplicemente un mezzo per iniettare componenti React in una struttura angolare; React era specificatamente progettato per non avere l'associazione dati bidirezionale a favore delle prestazioni, quindi qualsiasi implementazione di questo sarebbe necessariamente un work-around.

Dalla bocca del cavallo:

ngReact è un modulo angolare che permette Reagire componenti da utilizzare in applicazioni AngularJS. La motivazione per questo potrebbe essere una delle seguenti: È necessario un rendimento maggiore di quello che Angular può offrire (associazione dei dati bidirezionale, Object.observe, troppi osservatori di ambito sulla pagina) ...

Answer 2

Non ho molta esperienza con ngReact, ma il modo React di farlo è usare refs e recuperare il valore dal ref quando ne hai bisogno. Non sono sicuro di come sia il codice componente, quindi posso solo indovinare. Se si dispone di un campo di immissione all'interno del componente, fare questo:

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" /> 
    ) 
    } 
}) 

Tuttavia, è anche possibile associare il valore di una variabile di stato utilizzando linkState: https://facebook.github.io/react/docs/two-way-binding-helpers.html

Tuttavia, mi sento di raccomandare vivamente di utilizzare il primo modo , perché uno dei motivi per cui React è molto più veloce di Angular è perché evita l'associazione bidirezionale. Eppure, ecco come:

var SimpleInput = React.createClass({ 

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

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

Ora ogni volta che si accede this.state.myInput, si otterrà il valore della casella di input.