2
votes

e.target.value dans le bouton renvoie parfois indéfini. Pourquoi cela arrive?

J'ai défini quatre boutons et ces boutons appelleront la même méthode dans l'événement onClick.

Méthode

 render() {
    return (
        <div className='audit-menu' style={{backgroundColor: '#fff'}}>
            <div className='row align-items-center'>
                <div className="col text-left ml-2 font-weight-bold">
                    Invoice audit
                </div>
                <div className="col-6 ">
                    <div class="btn-group btn-group w-100">
                        <button class="w-25 btn menu-btn" value='inbox' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-upload pr-3">
                        </i>Inbox
                        </button>
                        <button class="w-25 btn menu-btn" value='rejected'  onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Rejected
                        </button>
                        <button class="w-25 btn menu-btn" value='accepted' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Accepted
                        </button>
                        <button class="w-25 btn menu-btn" value='archive' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Archive
                        </button>
                    </div>
                    â€‹
                </div>
                <div className="col">
                    <li className="nav-item dropdown d-none d-lg-block">
                        <a aria-expanded="true" className="nav-link dropdown-toggle select-company-dropdown"
                           data-toggle="dropdown" href="#" id="selectLanguage">Select company</a>
                    </li>
                </div>
            </div>
        </div>
    );
}

Render ( )

   changeFilterForButtons(e){
    let filter = e.target.value;
    console.log("----------------------------"  + filter);
    this.props.handleData(filter);
    this.props.filterData();
}

Lorsque les boutons sont cliqués la plupart du temps, e.target.value est utilisé par la fonction ci-dessus. Mais parfois, il renvoie non défini . Pourquoi cela se produit?. La sortie Console.log est ajoutée ci-dessous.

javascript reactjs

0 commentaires

3 Réponses :

1
votes

essayez avec

constructor( props ){
    super( props );
    this.changeFilterForButtons = this.changeFilterForButtons.bind(this);
}

au lieu de

this.changeFilterForButtons.bind(this)

ou dans le constructeur:

this.changeFilterForButtons

vous pouvez consulter cet article pour plus d'informations sur bind, ceci

C'est pourquoi nous devons lier l'événement

4 commentaires

Votre réponse est très utile. J'ai changé le code en fonction de vos changements. mais j'obtiens toujours la même erreur. Cela n'arrive que parfois pas à chaque fois. Tous les boutons peuvent-ils être appelés en une seule méthode?.

J'essaye sans this.props.handleData (filtre); et this.props.filterData (); . Ça marche toujours tout le temps

votre réponse est correcte. mon erreur était avec son icône, lorsque je clique sur l'icône, elle retourne undefined.

Heureux de savoir si cela vous aide, veuillez accepter la réponse. Merci

3
votes

Tout d'abord, je dois dire que les deux réponses ci-dessous sont correctes. Mon erreur s'est produite à cause de son icône.

<button class="w-25 btn menu-btn" value='archive' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3"</i>Archive</button>

Lorsque je clique accidentellement sur l'icône, elle retournera indéfinie car elle n'a aucune valeur à renvoyer.

0 commentaires

-1
votes

J'ai eu le même problème. Quand j'ai lu le deuxième commentaire, j'ai vu où trouver la solution.

Solution CSS:

button > * {
  pointer-events: none;
}

Source

0 commentaires