Как менять disabled у элемента в react.js?

Question

[LB777]

На время получения данных хочу деактивировать кнопку "отправить", через атрибут тега disabled.
Делаю так:

var LogIn = React.createClass({
    getInitialState: function(){
        return {
            disabled: "enable";
        };
    },
    submitLogin: function() {
        ....
        $.ajax({
            ....
            beforeSend: function() {
                this.setState({
                    disabled: "disabled"
                });
            },
            ....
            complete: function (){
                this.setState({
                    disabled: "enable"
                });
            },
            ....
        })
        ....
    },
    render: function(){
        return(
            <form method="post" id="registration" className="message">
            ..........
                <p><input type="submit" value="Отправить" onClick={this.submitLogin} disabled={this.state.disabled} /></p>
            </form>
        );
    }
})

Но при рендеренги появляется только один атрибут disabled без значений и кнопка становиться не доступной.
Что делаю не так?
Как управлять в react.js атрибутом disabled?
И вообще как ими управлять?)))

Answer 1

[Андрей Антропов]

В React атрибут disabled принимает bool, то есть disabled={false} сделает элемент активным

Answer 2

[Михаил Горячкин]

Ну собственно говоря вы делаете все нормально, вот убогий рабочий пример:
HTML:

<div class="container">
</div>

JS:

var Test = React.createClass({
  getInitialState: function() {
    return {disabled: true};
  },
  clickHandlers: function() {
    this.setState({disabled: false});
  },
  render: function() {
    return (
      <div>
          <button disabled={this.state.disabled}>Тест</button>
          <button onClick={this.clickHandlers}>Сменить</button>
      </div>
    );
  }
});
React.renderComponent(Test({}), document.querySelector(".container"));

А у вас у меня вызывают сомнения во эти строки:

beforeSend: function() {
                this.setState({
                    disabled: "disabled"
                });
            },
            ....
            complete: function (){
                this.setState({
                    disabled: "enable"
                });
            }

Сдается мне что this то у вас там представляет собой объект запроса и не имеет не чего общего с вашим контекстом исполнения. Надо как-то так:

submitLogin: function() {
        var that = this;
        ....
        $.ajax({
            ....
            beforeSend: function() {
                that.setState({
                    disabled: "disabled"
                });
            },
            ....
            complete: function (){
                that.setState({
                    disabled: "enable"
                });
            },
            ....
        })
        ....
    }

Answer 3

[123 123]

Правильнее было бы вынести запрос в api модуль, а из компонента отправлять событие. Короче говоря — использовать Flux.