Двунаправленная привязка данных с ngReact

Question

Использование 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; } }" /> 

Однако есть автоматический/более элегантный способ?

Answer 1

Я так не считаю. ngReact - это просто средство для инъекции компонентов в угловую структуру; Реакция была , а именно, предназначенная не для двусторонней передачи данных в пользу производительности, поэтому любая реализация этого обязательно была бы обходной.

Из первоисточника:

ngReact является угловым модулем, который позволяет Реагировать компоненты, которые будут использоваться в AngularJS приложениях. Мотивацией для этого может быть любое из следующего: вам нужна большая производительность, чем может предложить Angular (двусторонняя привязка данных, Object.observe, слишком много наблюдателей на странице) ...

Answer 2

У меня нет большой опыт работы с 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, вы получите значение в поле ввода.