Comment désactiver le bouton React.js

J'ai ce composant:

import React from 'react';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.value);
    this.input.value = '';
}


render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

}

Je veux que le bouton est désactivé lorsque la valeur d'entrée est vide. Mais le code ci-dessus ne fonctionne pas. Il dit:

ajoutez-élément.composante.js:78 Uncaught TypeError: Cannot read property 'valeur' undefined

pointant vers disabled={!this.input.value}. Que puis-je faire de mal ici? Je suppose que peut-être la ref n'est pas encore créé lors de la render exécution de la méthode. Si, alors, quelle est la workararound?

InformationsquelleAutor dKab | 2017-01-05