react example reactjs reactjs-flux

reactjs - example - react flux github



¿Cómo enviar un formulario usando la tecla Intro en react.js? (2)

Cambie <button type="button" a <button type="submit" . Elimina el onClick . En su lugar, haga <form className="commentForm" onSubmit={this.onCommentSubmit}> . Esto debería coger haciendo clic en el botón y presionando la tecla de retorno.

onFormSubmit = e => { e.preventDefault(); const { name, email } = this.state; // send to server with e.g. `window.fetch` } ... <form onSubmit={this.onFormSubmit}> ... <button type="submit">Submit</button> </form>

Aquí está mi formulario y el método onClick. Me gustaría ejecutar este método cuando se presiona el botón Enter del teclado. Cómo ?

NB: No se aprecia jquery.

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>


Use el evento keydown para hacerlo:

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> ); }