Comment dois-je appeler une méthode dans une autre méthode de réagir classe Es6

Donc ce que j'essaie de faire est simple

class Something extends React.Component {

validateEmail () {
//code that validates email,innerHTML a div.status element if error occurs
this.removeStatus();//then remove status onkeydown of input element
 }

removeStatus () {
//code that removes the status onkeydown of input element

 }
}

pour une raison que ça ne fonctionne pas. dans ma console javascript (chrome)
je reçois ce

login.js:132Uncaught TypeError: this.removeStatus is not a function

Edit 1: j'ai ajouté le code, comme vous pouvez le voir je suis de liaison validateEmail dans le constructeur 

class Email extends React.Component {
constructor(props) {
super(props);
this.change = this.change.bind(this);
this.validateEmail = this.validateEmail.bind(this);
this.state = {
value : ''
}
}
removeStatus() {
$('input').on('keydown',function () {
$('.contextual-info').fadeOut();
});
}
validateEmail(event) {
event.preventDefault();
var token = $('#token').val();
var email_regex=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if ($.trim(this.state.value)  !== "") {
if (email_regex.test(this.state.value)) {
$.ajax({
url:'/login',
type:'post',
data:{email:this.state.value,_token:token},
success: function (response) {
if (response) {
$('#email').remove();
$('.btn').remove();
$('#status').html('');
ReactDOM.render(<Password /> ,document.getElementById('login-dialogue'));
$('input[type="password"]').focus();
}  else {
$('input#email').addClass('input-context');
if($('#status').html('<div class="bg-danger contextual-info wrong">Email Address Not Found!</p>')){
this.removeStatus();
}
}
}
});
} else {
if($('#status').html('<div class="bg-danger contextual-info wrong">Invalid Email Address</div>')){
this.removeStatus();
}
}
} else {
if($('#status').html('<div class="bg-danger contextual-info wrong">Can\'t submit an empty field!</div>')){
this.removeStatus();
}
}
}
change (event) {
this.setState({
value : event.target.value
});
}
render(){
return(
<div className="login-dialogue" id="login-dialogue">
<h1 className="text-center">Log in</h1>
<div id="status"></div>
<form action="" onSubmit={this.validateEmail} id="validateEmail">
<input type="email" id="email" value={this.state.value} placeholder="Email Address" onChange={this.change} />
<button type="submit" className="btn btn-flat btn-wide teal white-text">Continue</button>
</form>
</div>
);
}
}
ReactDOM.render(<Email /> ,document.getElementById('flex-me'));
Montrez-nous comment vous appelez validateEmail. Si vous le faites correctement, this sera le Something instance a une removeStatus méthode
j'ai ajouté le code

OriginalL'auteur Seun LanLege | 2016-10-15

  1. 13

    Vos méthodes sont définies correctement, de sorte que le problème est dans la façon dont vous appel validateEmail.

    Vous êtes en invoquant d'une manière qui définit this à autre chose que votre Something instance. Ce qui est commun dans des écouteurs d'événement. Je suppose que vous avez un peu de code dans votre render:

    <button onClick={this.validateEmail} />

    La solution recommandée pour Réagir est de lier les gestionnaires d'événements dans votre constructeur:

    class Something extends React.Component {
constructor() {
super();
this.validateEmail = this.validateEmail.bind(this);
}
//...
}

    Vous pouvez également appeler la méthode à partir de l'intérieur d'une flèche de fonction, qui permet de préserver la valeur de this à l'endroit où il a été déclaré:

    <button onClick={() => this.validateEmail()} />

    L'inconvénient de cette approche est qu'une nouvelle onClick gestionnaire est créé à chaque fois que le composant ne soit rendue.

    MODIFIER: même problème, endroit différent. Vous appelez removeStatus à l'intérieur d'un function, qui perd de l'extérieur this de liaison. Utilisez une flèche en fonction de la place:

    $.ajax({
success: (response) => { 
//etc
this.removeStatus();
}
})

    Pour en savoir plus:

    veuillez prendre un coup d'oeil au code
    Voir la modifier. J'avais juste cause, mais l'appel se fait à l'intérieur d'un rappel function, pas un gestionnaire d'événement.

    OriginalL'auteur joews

  2. 2

    J'ai eu un Problème similaire

    Je viens de tomber sur un problème similaire avec le même message d'erreur. Ce qui est bizarre, c'est que parfois, quand j'appelle une méthode à l'intérieur d'une autre méthode, il fonctionne. Je fais un Simon de jeu et la méthode suivante dans une méthode qui fonctionne.

    handleMouseDown (e) {
if(e.target.id==="green"){
$("#green").addClass("colorGreenPush");
greenSound.play();
clicked.push(1);
this.handleCheck();
}

    Je suis simplement l'exécution d'une méthode de contrôle lorsque l'utilisateur appuie sur un bouton. Pas d'erreur.

    Cependant, j'ai été d'obtenir un TypeError avec ce code

     handleCheck () {
var display = $("#display");
if(litID.length == clicked.length){
if(litID.join() == clicked.join()){
if(round == 20){
setTimeout(function(){
alert("Unreal. You Acually Won!!!");
location.reload();
},1000);
}
else{
setTimeout(function(){
display.text("-"+(round + 1)+"-");
round ++;
console.log(this);
litID = [];
clicked = [];
j = 0;
this.handleGame();
},1000);
}
}

    Près de la fin, j'ai essayer this.handleGame(); et il ne fonctionnait pas.

    Ma Solution

    Vous remarquerez que j'ai fait un console.log(this); juste pour voir ce que c'était à ce point. S'avère que c'était l'Objet de la Fenêtre. Je ne sais pas pourquoi, peut-être d'être enterré dans un if/else. Les deux méthodes sont liées donc ce n'était pas le problème.

    De toute façon. Je suis allé fouiller dans la fenêtre de l'objet et s'avère que je peux utiliser this.App.prototype.handleGame(); et ça marche!!! Je dois ajouter que le nom de mon principal ES6 Composant est App. Cela variera en fonction de votre composant et les noms de méthode, mais le principe doit toujours s'appliquer.

    Comment dois-je appeler une méthode dans une autre méthode de réagir classe Es6

    Je Suis En État De Choc

    Je vais vous avouer que je suis un newb. C'est mon deuxième mini-projet à Réagir mais trouver que c'était la chose la plus cool. Maintenant il y a peut être d'autres moyens comme la flèche fonctions mentionnées ci-dessus, mais c'est ce qui a fonctionné pour moi. Et c'était la différence entre un jeu et ayant droit à ordures. Espérons que cela aide quelqu'un.

    OriginalL'auteur benjaminadk