web-dev-qa-db-fra.com

Appel d'une fonction dans React

Je suis un débutant dans React, et je suis un peu confus quant à l'appel d'une fonction dans React.

J'ai vu les façons suivantes et je ne sais pas quand les utiliser et lesquelles.

  • handleAddTodo ={this.handleAddTodo}
  • handleAddTodo ={this.handleAddTodo()}
  • handleAddTodo ={handleAddTodo}
  • handleAddTodo ={this.handleAddTodo}
  • handleAddTodo ={handleAddTodo()}

Sont-ils interchangeables? Puis-je faire cela pour gérer un événement, de la même manière pour appeler une fonction?

javascriptreactjsjsxdom-events
4
Anyname Donotcare

Dans ES6, vous pouvez utiliser la fonction normale ou la fonction flèche:

Function1 (Fonction normale) 

functionA(){
   //Something here
}

Il faut ensuite appeler this.functionA ()

Function2 (ArrowFunction) 

functionA = () => {
   //SomeThing Here
}

Il faut ensuite appeler this.functionA

* Function3 (Ex: dans une constante de React) *

const A = (functionTest) =>{
  return (
     <div>{functionTest}</div>
    );
}

functionTest est mapStateToProps dans React :)

J'espère que cela vous sera utile :)

1
Voi Mập

c'est correct -> handleAddTodo ={this.handleAddTodo} Lorsque la fonction passe au composant enfant, vous devez lier votre fonction comme ceci handleAddTodo ={this.handleAddTodo.bind(this)}. le code ci-dessous vous aide à douter.

Exemple simple 

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;

Événements enfants 

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);
   };

   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }

   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp.bind(this)}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}

export default App;

Voir ici

1
vnomvk

Vous pouvez déclencher des événements avec this.props.someProps(). Vérifiez l'exemple suivant.

import React, { Component } from 'react';    

class AddToDo extends Component {
   render() {
      return (
         <button onClick={ev => this.props.handleAddToDo(ev, 'hello')}>
            {this.props.title}
         </button>
      )
   }
}

class Todos extends Component {
   handleAddToDo(ev, someVal) {
      // do something
   }

   render() {
      return (
         <AddToDo title="Add" handleAddToDo={(ev, someVal) => this.handleAddToDo(ev, someVal)} />
      )
   }
}

export default Todos;
1
Abraham Gnanasingh

Pour appeler la fonction vous devez ajouter ()

{this.handleAddTodo()}

À propos de la gestion des événements - Gestion des # événements

Fonctions fléchées - Fonctions # Fonctions fléchées

1
fauster01