Paramètre conditionnel onClick comportement de Réagir Composant

Je suis en train de travailler sur un composant, un bouton (champ de saisie de type "submit") de la soumission des données une fois cliqué. Cependant, je voudrais introduire une clause de sauvegarde pour afficher un message d'alerte sur l'écran si le champ de saisie est vide.

Pensant que ce serait la même manière comme il le ferait pour les attributs du composant, j'ai essayé de variations sur le suivant sans beaucoup 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 onSubmit fonction, dans le but d'isoler les mises à jour de la boutique aussi loin que possible (je suis en suivant une Réaction Redux structure).

Aucune idée si et comment JSX gère ce genre de situation?

OriginalL'auteur GroomedGorilla | 2017-06-19

  1. 14

    Cela devrait fonctionner: 

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

    OriginalL'auteur CD..

  2. 3

    Vous attribuez la valeur de onClick event, mais onclick s'attendre à une fonction. Pour atteindre cet envelopper toute logique à l'intérieur d'un corps de la fonction.

    L'écrire 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);
}

    OriginalL'auteur Mayank Shukla