React empêche la soumission du formulaire lorsque l'on appuie sur la touche Entrée à l'intérieur de l'entrée.

Question

React empêche la soumission du formulaire lorsque l'on appuie sur la touche Entrée

J'ai le composant React Barre de recherche suivant où le conteneur parent peut appeler en utilisant

<SearchBar onInputChange={this.handleInputChange} />

Chaque fois que l'utilisateur modifie l'entrée, le conteneur parent sera notifié. C'est pourquoi ma barre de recherche n'a pas besoin de bouton d'envoi.

Cependant, je constate que si j'appuie sur la touche "Entrée" dans la barre de recherche, la page entière s'actualise. Et je ne le souhaite pas.

Je sais que si j'ai un bouton dans le formulaire, je peux appeler event.preventDefault(). Mais dans ce cas, je n'ai pas de bouton et je ne sais pas quoi faire.

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 SearchBar

Answer 1

Vous devez créer un gestionnaire de formulaire qui empêcherait l'action par défaut du formulaire.

L'implémentation la plus simple serait :

<form onSubmit={e => { e.preventDefault(); }}>

Mais l'idéal est de créer un gestionnaire dédié à cet effet :

<form onSubmit={this.submitHandler}>

avec la mise en œuvre suivante

submitHandler(e) {
    e.preventDefault();
}

Answer 2

Je ne suis pas sûr que cela fonctionne dans toutes les situations, car lorsque vous appuyez sur la touche Entrée dans le champ de saisie d'un formulaire, vous déclencherez toujours la méthode onSubmit, même si l'envoi par défaut ne se produira pas. Cela signifie que vous déclencherez toujours la pseudo-action de soumission que vous avez conçue pour votre formulaire. Un one liner avec ES6 qui résout le problème spécifiquement et entièrement :

<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />

Cette solution ne devrait avoir aucun effet secondaire et résout directement le problème.