J'ai un bouton à l'intérieur de ma fonction de rendu, onclick dont une méthode est appelée qui affiche une fenêtre contextuelle avec une forme simple avec une zone de texte d'entrée et un bouton. La chose est que je veux que ce bouton soit désactivé si la zone de texte d'entrée est vide.
J'ai essayé de définir une variable "nom" dans l'état et utilisez-la. Même pensé que la valeur de l'état est mise à jour lorsque l'utilisateur apporte quelques modifications dans la zone de texte d'entrée, mais je ne peux pas utiliser cette valeur mise à jour pour permettre ou désactiver le bouton. P>
render(){
return(
<button type='button' onClick={this.createUser} />
);
}
private createUser = (e) => {
return (
<div>
<input onChange={event => this.setState({name : event.target.value})}></input>
<button disabled={!this.state.name}>Create</button>
</div>
);
}
3 Réponses :
Vous avez oublié de lier cela au gestionnaire d'événements, lorsqu'il met à jour l'état, il ne met pas à jour votre état local: Remarque pour l'OnCliquez sur le bouton, j'ai lié cela qui permet à votre état local d'être mis à jour.
Essayé cela, mais ne fonctionne toujours pas. En fait, en vrai code, j'ai une méthode de plus entre Onclick de bouton et CreateUser (). Et de cette méthode appelle va à CreateUser ()
Essayez également de lier la méthode entre les deux. Pour moi, c'est toujours la liaison qui provoque un problème.
essayé cela, mais maintenant obtenir: réact.Development.js? 820d: 88 Violation invariante non capturée: réagissez.L'hlildren.Only devrait recevoir un seul enfant de réaction.
Essayez comme ça.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script> <div id="app"></div>
Je sais que cela fonctionnerait mais j'en ai beaucoup impliqué entre les deux et je ne peux pas ajouter tout cela dans le retour principal en ligne. Je viens de poster un échantillon factice du code.
Pourriez-vous essayer mon approche? Si cela.state.name Soyez mis à jour dans la fonction de rendu principal en fonction des modifications de l'entrée, cette valeur serait livrée sous forme de paramètre sur CreateUser.
Onchange La valeur doit être une fonctionVous êtes également manquant de fermeture frisée dans
Onchange ValeurOui, j'ai cela dans le code, je l'ai juste manqué tout en ajoutant ici. Mis à jour maintenant
Comment créez-vous la pop-up? Utiliser des portails?
C'est un composant personnalisé créé à l'aide de --- const modal = CreatefacTory (réacteurbootstrap.modal);