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?
Vous devez vous connecter pour publier un commentaire.
À l'aide de
refs
n'est pas le plus pratique, car il lit les DOM directement, il est préférable d'utiliser Réagir destate
à la place. Aussi, votre bouton ne change pas parce que le composant n'est pas re-rendus et reste dans son état initial.Vous pouvez utiliser
setState
avec unonChange
écouteur d'événement pour rendre le composant à chaque fois le champ de saisie changements:Voici un exemple de travail:
JS:
HTML:
disabled
attribut dans les DOM s'il est défini àfalse
—c'est cross-browser convivial.disabled
attribut. C'est JSX, pas en HTML. Pas de problème ici.Vous ne devriez pas être la définition de la valeur de l'entrée réf.
Prendre un coup d'oeil à la documentation pour le contrôle des composants de formulaire ici - https://facebook.github.io/react/docs/forms.html#controlled-components
En un mot
Alors vous serez en mesure de contrôler l'état désactivé en utilisant
disabled={!this.state.value}
this.input
est pas défini jusqu'à ce que leref
callback est appelée. Essayez de définirthis.input
à une première valeur de votre constructeur.De la Réagir docs sur les refs, l'accent de la mine:
Il y a peu de méthodes typiques comment nous les composants de contrôle de la rendre à Réagir.
Mais, je n'ai pas utilisé l'un de ces ici, j'ai simplement utilisé le ref de l'espace de noms sous-jacent enfants pour le composant.
JS:
HTML: