score:4

Accepted answer

the 'react' way of doing this is to control the button's disabled attribute in the render method, and using the component's state to keep track of it.

for example:

var mycomponent = react.createclass({

  getinitialstate: function() {
    return { disabled: false };
  },

  disableformbutton: function() {
    this.setstate({ disabled: true });
  },

  render() {
    return (
      <div>
        ...
        <button
          disabled={this.state.disabled}
          onclick={this.disableformbutton.bind(this)}>
          disable
        </button>
      </div>
    );
  }
});

jsfiddle here

note that you no longer need the ref, as you don't need to access the dom node from outside the render method.

see thinking in react from the react.js documentation for more information about what should be stored in a component's state, and what should be passed as properties.

for those reading in 2020 and later

since the introduction of the hooks api in react, you can rewrite the example here using a functional component.

const mycomponent = () => {
  const [disabled, setdisabled] = react.usestate(false)
  return (
    <button
      disabled={disabled}
      onclick={() => setdisabled(true)}>
        disable
    </button>
  )
}

score:5

use standard dom api for this, like:

react.finddomnode(this.refs.formbutton).setattribute('disabled', true)

or, if you want to use jquery:

$(react.finddomnode(this.refs.formbutton)).attr('disabled')

Related Query

More Query from same tag