Dev Faq
0
votes

Fonction dans la classe ne peut pas appeler la fonction extérieure

function Welcome(props) {
  console.log("Welcome Back");
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(){
    <Welcome />
  }
  
  render(){
    return (
    <div>
        <button onClick={this.handleClick}>CLICK HERE </button>
    </div>
  );
  }
}
Why function handleClick can't call outer function Welcome? is there any solution to this?
1 commentaires

Je pense que vous vous mélangez entre une fonction et un composant réactif. Si vous souhaitez appeler la fonction de bienvenue, écrivez accueil ();

3 Réponses :

1
votes

Appeler cette fonction, vous devez le faire comme suit: 

function Welcome(props) {
  return (<div>Welcome Back!</div>
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showWelcomeMessage: false
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(){
    this.setState({showWelcomeMessage: true})
  }
  
  render(){
    return (
    <div>
        {this.state.showWelcomeMessage ? <Welcome /> : null}
        <button onClick={this.handleClick}>CLICK HERE </button>
    </div>
  );
  }
}

1 commentaires

@DRF J'ai mis à jour ma réponse pour inclure des scénarios potentiels pour vous.

0
votes

Dans votre exemple de changement code> à Bienvenue () code> suffit. Mais vous devez utiliser Camelcase pour définir des fonctions. Mais voici la version refoulée. 

import React from "react";

const welcome = () => {
  console.log("Welcome Back");
};

export default function App() {
  const handleClick = () => {
    welcome();
  };

  return (
    <div>
      <button onClick={handleClick}>CLICK HERE </button>
    </div>
  );
}

0 commentaires
0
votes

Changer simplement l'appel de la fonction extérieure "Bienvenue", car ce n'est pas un composant: 

handleClick(){
    Welcome()
}

1 commentaires

Je pense que vous manquez un point-virgule après le Bienvenue () .

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?