How to disable button in React.js

Question

I have this component:

import React from \'react\';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.         


        

Answer 1

There are few typical methods how we control components render in React.

But, I haven't used any of these in here, I just used the ref's to namespace underlying children to the component.

class AddItem extends React.Component {
    change(e) {
      if ("" != e.target.value) {
        this.button.disabled = false;
      } else {
        this.button.disabled = true;
      }
    }

    add(e) {
      console.log(this.input.value);
      this.input.value = '';
      this.button.disabled = true;
    }

    render() {
        return (
          

           this.input=input} onChange = {this.change.bind(this)} />
          
           this.button=button}>Add
          
          
        );
    }
}

ReactDOM.render( , document.getElementById('root'));