web-dev-qa-db-fra.com

Le bouton React-Native sur la presse ne fonctionne pas

J'essaie de lier la fonction handleClick à mon bouton onPress. Mais ça ne marche pas. Lorsque je rafraîchis la page, je reçois l'alerte sans cliquer sur le bouton et après avoir fermé l'alerte et cliqué sur le bouton, rien ne se passe.

Mon code est:

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick(){
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

Je reçois également l'avertissement:

enter image description here

Qu'est-ce que je fais mal?

javascriptreactjsreact-native
8
Somename

Vous appelez handleClick quand il s'affiche comme vous l'avez onPress={this.handleClick()}

essayez onPress={this.handleClick} à la place, pour lui passer la fonction en tant que rappel.

16
WayneC

Vous définissez d'abord votre gestionnaire de clics comme une fonction de flèche. De cette façon, vous n'avez plus besoin de lier la fonction. Votre fonction sera comme ceci:

handleClick = () => {
    alert('Button clicked!');
}

Utilisez ensuite cette fonction dans le <Button> tag comme ceci:

<Button
 onPress={this.handleClick}
 title="Click ME"
 color="blue"
/>
10
Vahid Boreiri

Lorsque react-native détecte un événement de clic et souhaite vous avertir, il appelle la fonction onPress en tant que fonction. vous devez donc donner ne fonction à onPress prop comme:

onPress={this.handleClick}

cela connecte onPress à la méthode handleClick. mais si vous voulez appeler d'autres méthodes dans handleClick et que vous avez besoin de "this object", vous pouvez passer la méthode handleClick comme ceci:

onPress={this.handleClick.bind(this)}

Bonne chance

5
Alireza Sheikholmolouki

mettez à jour votre code! vous devez passer une référence

<Button
       onPress={this.handleClick}
       title="Click ME"
       color="blue"
      />
3
csath

Pouvez-vous l'essayer

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick=()=>{
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}
2
muhammet gürbüz