Comment soumettre un formulaire en utilisant la touche entrée dans react.js?
Voici mon formulaire et la méthode onClick. Je voudrais exécuter cette méthode lorsque le bouton Entrée du clavier est enfoncée. Comment ?
N. B: aucun jquery n'est apprécié.
comment: function (e) {
e.preventDefault();
this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
},
<form className="commentForm">
<textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br />
<input type="text" placeholder="userPostId" ref="userPostId" /> <br />
<button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
</form>
2 réponses
Remplacez <button type="button" par <button type="submit". Supprimer le onClick. Faites plutôt <form className="commentForm" onSubmit={this.onCommentSubmit}>. Cela devrait attraper en cliquant sur le bouton et en appuyant sur la touche Retour.
Edit: comme le dit James dans les commentaires, vous pouvez également appeler event.preventDefault() dans le rappel pour arrêter la page essayant de charger l'url action.
Si vous souhaitez utiliser this dans la fonction de rappel vous pouvez utiliser la flèche fonctions: onSubmit={(e) => this.onCommentSubmit(e)} ou this.onCommentSubmit = this.onCommentSubmit.bind(this) dans le constructeur ou même e7 flèche méthodes onCommentSubmit = (e) => {...}.
Utilisez l'événement keydown pour le faire:
input: HTMLDivElement | null = null;
onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
// 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.onSubmit();
}
}
onSubmit = (): void => {
if (input.textContent) {
this.props.onSubmit(input.textContent);
input.focus();
input.textContent = '';
}
}
render() {
return (
<form className="commentForm">
<input
className="comment-input"
aria-multiline="true"
role="textbox"
contentEditable={true}
onKeyDown={this.onKeyDown}
ref={node => this.input = node}
/>
<button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
</form>
);
}