0
votes

appeler la fonction parent par l'enfant - React

Je veux appeler la fonction parent par un enfant.

Classe parent.

Ici, j'ai un tableau d'actions qui crée des colonnes dans un enfant (par exemple: Modifier la colonne, qui a comme icône) et je veux appeler une fonction onEditClick d'un parent lorsque l'utilisateur clique sur l'icône d'édition.

onEditClick() {
    // this method should be called via child
}

render() {
    return (
      <Child
        actions={[
          {
            name: "Edit",
            icon: (
              <Tooltip title="Delete" className={classes.pointerStyle}>
                <Edit />
              </Tooltip>
            ),
            handler: "onEditClick"
          },
          {
            name: "Delete",
            icon: (
              <Tooltip title="Delete" className={classes.pointerStyle}>
                <DeleteIcon />
              </Tooltip>
            ),
            handler: "onDeleteClick"
          }
        ]}
      />
    );
}

//Child class
render() {
    return actions.map(col => (
      <TableCell style={{ marginLeft: "5px" }}>
        {col.icon} // here click event will occur
      </TableCell>
    ));
}

reactjs

1 commentaires

J'ai mentionné handler que je veux appeler. Je ne veux pas utiliser les accessoires directement. Je veux en quelque sorte utiliser actions-prop puis à l'intérieur que j'ai le gestionnaire de cette fonction que je veux appeler.

3 Réponses :

0
votes

Vous pouvez appeler une fonction parent à partir du composant enfant. Il vous suffit de passer la méthode de rappel depuis le composant parent à l'aide des accessoires et d'appeler cette méthode depuis l'enfant. Voici un exemple:

parent.js:

 render(){
   return(
   <button onClick={this.props.onEditClick} />
 )}

dans Child.js:

onEditClick = () =>{}
render(){
  return(
  <child onEditClick={this.onEditClick}/>
)}

0 commentaires

0
votes

C'est assez facile à faire et aussi assez courant. Vous devez d'abord transmettre la fonction comme accessoire à dans le composant enfant. Une fois qu'il s'agit d'un accessoire, vous pouvez y accéder dans le composant enfant. Comme ceci:

this.props.parentFunction

Ensuite pour accéder à l'intérieur du composant enfant:

<Child parentFunction={this.onEditClick}>

Quel que soit le nom de prop que vous choisissez, vous autorisez l'accès au fonction que vous spécifiez dans le prop.

0 commentaires

0
votes

Vous pouvez faire quelque chose comme ça. Vous pouvez passer les fonctions onEditClick et onDeleteClick du tableau des actions à l'intérieur du parent en tant que gestionnaires à votre composant enfant, et vous pouvez envelopper votre icône dans un bouton et passer ce gestionnaire au onPress

    onEditClick = () => {}
    onDeleteClick = () => {}

    render() {
       return (
          <Child                
             actions={[
               {
                 name: 'Edit',
                 icon: <Tooltip title="Delete" className={classes.pointerStyle}>
                            <Edit />
                        </Tooltip>,
                 handler: this.onEditClick
                },
                {
                  name: 'Delete',
                  icon: <Tooltip title="Delete" className={classes.pointerStyle}>
                            <DeleteIcon />
                        </Tooltip>,
                  handler: this.onDeleteClick
                 }]
                }

            />
        );
}

// Child class
     render() {
        return (
           this.props.actions.map(col => (
                <TableCell style={{ marginLeft: '5px'}}>
                   <Button onPress={col.handler}> 
                     <View>{col.icon}</View>
                   </Button> 
                 </TableCell>
            )
           )                                         
        );
}

3 commentaires

droit! J'ai appelé comme ceci onClick = {() => col.handler (row, i)} mais l'état devient vide. une entrée?

Fini. ça marche maintenant. Besoin de faire ceci ---> handler: this.onDeleteClick.bind (this)

Peut également fonctionner sans se lier à cela, si vous utilisez les fonctions fléchées