How to change disabled element in react.js?

Question

React

At the time of receiving the data, I want to deactivate the "send" button, through the attribute of the disabled tag.
I do it like this:

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

But when rendering, only one disabled attribute appears with no values, and the button becomes unavailable.
What am I doing wrong?
How to control the disabled attribute in react.js?
And how do you manage them?

Answer 1

In React, the disabled attribute accepts a bool, meaning disabled={false} will make the element active

Answer 2

Well, in fact, you are doing everything fine, here is a poor working example:
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"));

And I have doubts about these lines:

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

It seems to me that this is what you have there is a request object and has nothing to do with your execution context. You need something like this:

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

Answer 3

It would be more correct to make a request to the api module, and send an event from the component. In short - use Flux.