web-dev-qa-db-fra.com

Définition du comportement onClick conditionnel dans React Component

Je travaille sur un composant où un bouton (champ de saisie de type "soumettre") soumettra des données une fois cliqué. Cependant, je voudrais introduire une sauvegarde pour afficher une alerte à l'écran si le champ de saisie est vide.

Pensant que cela fonctionnerait de la même manière que pour les attributs de composant, j'ai essayé des variantes des éléments suivants sans trop de chance:

onClick={props.inputText === '' 
                ? 
                alert("Text cannot be blank.") 
                : 
                (e => props.onSubmit(props.inputText))}/>

Je préfère ne pas exécuter la vérification à l'intérieur de la fonction onSubmit afin d'isoler autant que possible les mises à jour du magasin (je suis en train de suivre une structure React-Redux).

Une idée si et comment JSX gère une telle situation?

reactjsreact-reduxreact-jsx
10
GroomedGorilla

Cela devrait fonctionner:

onClick={() => { props.inputText === '' ? 
   alert("Text cannot be blank.") : 
   props.onSubmit(props.inputText)  }}
17
CD..

Vous affectez la valeur à onClick event, mais onclick attend une fonction. Pour y parvenir, enveloppez toute la logique à l'intérieur d'un corps de fonction.

Écrivez-le comme ceci:

onClick={ e => {
    props.inputText === '' ? 
        alert("Text cannot be blank.") 
    : 
        props.onSubmit(props.inputText)}
    }
/>

Ou

onClick={this.onClick.bind(this)/>

onClick(e){
    if(props.inputText === ''){
        alert("Text cannot be blank.");
        return;
    }
    props.onSubmit(props.inputText);
}
4
Mayank Shukla