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

Используя ngReact, как элегантно настроить двустороннюю привязку данных?

Допустим, у меня есть простой компонент ввода React, который принимает value и запускает onChange:

angular.module('app', []).value('SimpleInput', props => 
  <input type='text' 
         value={props.value}
         onChange{e => props.onChange(e.target.value)} />
)

Тогда со стороны AngularJS я бы ожидал, что что-то подобное обновит value в области видимости:

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

Однако существует ли более элегантный способ установить двустороннюю привязку к области видимости AngularJS, схожую с ng-model?

Ответ 1

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

Из устья лошади:

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

Ответ 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, вы получите значение поля ввода.