Réagir empêcher la soumission d'un formulaire lorsque la touche entrée est pressée à l'intérieur de l'entrée

Réagir empêcher la soumission d'un formulaire lorsque la touche entrée est pressée

J'ai le texte suivant Réagir Barre de Recherche de la composante où le conteneur parent pouvez appeler à l'aide

<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 besoin d'aucun bouton soumettre.

Cependant, j'ai constaté que si j'appuie sur entrer à l'intérieur de ma barre de recherche, l'ensemble de la page est rafraîchie. Et je ne veux pas que.

- Je savoir si j'ai un bouton dans le formulaire, que je pourrais appeler de l'événement.preventDefault(). Mais dans ce cas je n'ai pas de bouton donc je ne sais pas quoi faire ici

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
Est-il une raison pour laquelle vous devez utiliser une balise de formulaire? Si vous remplacez la par un div, puis entrez ne se soumettent pas.
Div seraient mot de trop. J'ai eu un formulaire juste au cas où je veux ajouter des champs dans l'avenir et de la forme permet plus de contrôle

OriginalL'auteur ErnieKev | 2017-05-03

  1. 20

    Vous avez besoin pour créer un gestionnaire de formulaire qui permettrait d'éviter le défaut de forme de l'action.

    L'implémentation la plus simple serait:

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

    Mais, idéalement, vous créez un gestionnaire dédié pour que:

    <form onSubmit={this.submitHandler}>

    avec la suite de la mise en œuvre

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

    OriginalL'auteur zerkms

  2. 2

    Je ne suis pas sûr si cela fonctionne pour toutes les situations, comme lorsque vous appuyez sur entrée dans une forme du champ de saisie, vous serez toujours à déclencher la méthode onSubmit, bien que le défaut de soumettre n'aura pas lieu. Cela signifie que vous aurez toujours de déclencher votre pseudo soumettre l'action que vous avez conçu pour votre formulaire. En une seule ligne avec ES6 qui permet de résoudre le problème plus précisément et entièrement:

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

    Cette solution doit être 0 effets secondaires et permet de résoudre le problème directement.

    C'est une bonne solution si il ya seulement 1 entrée, de la manipulation à la onSubmit niveau est le mieux pour un formulaire avec plusieurs contrôles
    Ma solution fonctionne dans beaucoup de situations qui devraient atterrir à quelqu'un ici. Beaucoup de gens vont essayer la solution ci-dessus pour constater qu'elle empêche la touche entrée pour chaque partie d'un formulaire. Plus spécifique est mieux dans des situations où vous souhaitez que d'autres fonctionnalités de continuer, comme il le ferait par défaut. Si vous avez une entrée unique ou d'un composant dans un formulaire que vous ne voulez pas déclencher votre fonction envoyer, c'est la seule solution qui fonctionne. D'autres méthodes seront explicitement désactiver le bouton enter ou explicitement désactiver la soumission avec les normes html5, mais ne sera pas faire ce qui est demandé.
    Je vous remercie. La désactivation de la soumettre à une seule entrée, de plusieurs est exactement ce que je cherchais à faire.

    OriginalL'auteur David Kamer