Reaccionar previene el envío del formulario cuando se presiona enter
Tengo el siguiente componente React Search Bar donde el contenedor principal puede llamar usando
<SearchBar onInputChange={this.handleInputChange} />Cada vez que el usuario cambie la entrada, se notificará al contenedor principal. Es por eso que mi barra de búsqueda no necesita ningún botón de envío.
Sin embargo, descubro que si presiono Intro dentro de mi barra de búsqueda, se actualiza toda la página. Y yo no quiero eso.
Sé que si tengo un botón en el formulario, podría llamar a event.preventDefault(). Pero en este caso no tengo botón, así que no sé qué hacer aquí.
class SearchBar extends Component { constructor(props) { super(props); this.state = { value: '' }; this.handleChange = this.handleChange.bind(this) } handleChange(e) { this.setState({ value: e.target.value }); this.props.onInputChange(e.target.value); } render() { return ( <div id="search-bar"> <form> <FormGroup controlId="formBasicText"> <FormControl type="text" onChange={this.handleChange} value={this.state.value} placeholder="Enter Character Name" /> </FormGroup> </form> </div> ); } } export default SearchBarDebe crear un controlador de formulario que evite la acción de formulario predeterminada.
La implementación más simple sería:
<form onSubmit={e => { e.preventDefault(); }}>Pero lo ideal es crear un controlador dedicado para eso:
<form onSubmit={this.submitHandler}>con la siguiente implementación
submitHandler(e) { e.preventDefault(); }En un componente React con un campo de entrada de búsqueda, anidado en un formulario más grande (no React OR React), esto funcionó mejor para mí en todos los navegadores:
<MyInputWidget label="Find" placeholder="Search..." onChange={this.search} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={this.state.searchText} /> (e)=>{e.target.keyCode === 13} (respuesta de @DavidKamer) es incorrecta: no desea el event.target. Ese es el campo de entrada. Quieres el evento en sí. Y en React (específicamente 16.8, en este momento), quieres event.key (e.key, como quieras llamarlo).
No estoy seguro de si esto funciona para todas las situaciones, ya que cuando presiona Intro en el campo de entrada de un formulario, seguirá activando el método onSubmit, aunque no se producirá el envío predeterminado. Esto significa que aún activará su acción de pseudoenvío que ha diseñado para su formulario. Una sola línea con ES6 que resuelve el problema de manera específica y completa:
<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />Esta solución debería tener 0 efectos secundarios y resuelve el problema directamente.