React-Rails: как визуализировать компонент с помощью ссылки?

На данный момент я визуализирую свой компонент внутри файла .erb следующим образом:

<%= react_component('Counter', number: @counter) %>

Этот компонент имеет функцию, которая использует promised-xhr:

push: function(operation) {

    if(operation) {
      new_number = this.state.number +1;
    } else {
      new_number = this.state.number -1;
    }

 // This call works.
 // this.setState({number: new_number})

     XHR.post("/update", {
      data: {
        count: new_number
      }
    }).then(function(response) {
   // XHR.post is successful, so I can log the response.
      console.log(response.body.number);
   // But setState does not work because of 'this'
      this.setState({number: reponse.body.number})
    })

}

this.setState({number: response.body.number)} не работает, потому что this больше не является компонентом. Я планирую использовать React.findDOMNode(this.refs.myComponent), чтобы найти свой компонент и активировать новое состояние.

Однако я не могу понять, как использовать react_component для назначения ссылки моему компоненту счетчика.


ruby-on-rails reactjs javascript react-rails
person FaureHu    schedule 08.07.2015    source источник
comment
вы пробовали использовать .bind(this) ?   -  person Felipe Skinner    schedule 08.07.2015

Ответы (1)


arrow_upward
1
arrow_downward

Как насчет запоминания this, а затем использования локальной переменной внутри обратного вызова?

push: function(operation) {
  // ... 
  // Store `this` as local variable `_this`:
  var _this = this 

  XHR.post("/update", {/*...*/})
    .then(function(response) {
    // use local variable `_this`, which still refers to the component:
      _this.setState({number: reponse.body.number
    })
}

Кстати, ref может не помочь. После вызова getDOMNode у вас будет узел DOM (встроенный в браузер), а не компонент React.

person rmosolgo    schedule 08.07.2015
comment
Ты прав. Обещания не годятся для того, что я пытаюсь сделать, как и обратные вызовы в старом стиле. Осталось понять, как реализовать компонент, который меняет состояние после получения данных из запроса. - person FaureHu; 17.07.2015
comment
Используйте функцию setState в обработчике запросов, как показано выше. Назначьте компонент _this (локальная переменная), чтобы он мог ссылаться на него из обработчика запросов. - person rmosolgo; 18.07.2015