5
votes

événement onclick pour le composant importé dans react?

J'ai importé un composant depuis un autre fichier et je souhaite réinitialiser ma minuterie si je clique sur les éléments du composant importé. Existe-t-il un moyen de résoudre ce problème ou dois-je écrire les deux composants en jsx unique ?

import {SampleComponent} from "../SampleComponent";
<div>
   <SampleComponent  onClick = {?????????}/>
 </div>

reactjs

0 commentaires

4 Réponses :

0
votes

Si vous souhaitez appeler une fonction dans un composant parent, chaque fois qu'un événement (comme dans votre cas un événement onClick ) se produit dans un composant enfant, vous devrez passer la fonction parent en tant que accessoires. Voici à quoi il ressemblera:

class SampleComponent extends React.Component {
.
.
render() {
 handleClick = () => { ... }

 return (
  <div onClick={this.handleClick}>
    ...
  </div>
 )
}

Et voici comment sera votre SampleComponent:

class SampleComponent extends React.Component {

 render {
  return (
   <div onClick={this.props.onClick}> //to call the function on whole component
    <button onClick={this.props.onClick}>Click Me</button> //to call the function on a specific element
   </div>
  )
 }
}

Ce que j'ai compris jusqu'à présent de votre La question est que vous voulez appeler une fonction dans SampleComponent chaque fois qu'un événement de clic se produit dessus (sur SampleComponent).

Pour ce faire, voici à quoi ressemblera votre SampleComponent :

class ParentComponent extends React.Component {
 handleClick = () => { ... }

 render {
  return (
   <SampleComponent onClick={this.handleClick} />
  )
 }
}

Remarque: pour cela, vous n'avez pas besoin d'ajouter onClick dans parent.

0 commentaires

3
votes

Ce que vous pouvez faire ici est,

<div>
   <SampleComponent onHandleClick={() => ??????}/>
</div>

Ou vous pouvez passer la fonction de votre composant parent et ajouter un événement de clic sur le nœud supérieur du composant enfant.

import {SampleComponent} from "../SampleComponent";

<div onClick={??????}>
   <SampleComponent/>
</div>

0 commentaires

0
votes

resetTimerHandler = (timer)=>{
    timer = 0; or this.setState({timer: 0}) // how ever you are defining timer
}
render(){
    let displayTimer;
    this.updateTimer(displayTimer)// However you are updating timer
    return(
        <SampleComponent onClick={this.resetTimerHandler.bind(this,displayTimer)} />)
Without knowing how you are updating your timer I can't really give a specific answer but you should be able to apply this dummy code.

0 commentaires

0
votes

Il est difficile de répondre spécifiquement à votre question sans plus de contexte (comme le minuteur que vous souhaitez réinitialiser). Mais la réponse est non , vous n’avez pas besoin d’implémenter les deux composants dans le même fichier. Ceci est fondamental pour réagir pour transmettre des accessoires comme ce que vous avez essayé de faire dans votre question.

Voici un exemple. Dites que votre SampleComponent ressemble à ce qui suit:

import SampleComponent from '../SampleComponent';

function resetTimer() {
  // Add logic to reset timer here
}

function TimerHandler() {
  return (
    <SampleComponent onClick={() => resetTimer()} />
  );
}

et que le composant qui utilise SampleComponent ressemble à ceci: p>

// SampleComponent.jsx

function SampleComponent({ onClick }) { // the argument is an object full of the props being passed in
  return (
    <button onClick={(event) => onClick(event)}>Click Me!</button>
  );
}

Maintenant, lorsque vous cliquez sur le bouton rendu par SampleComponent , le gestionnaire onClick est passé de TimerHandler sera appelé.

Un accessoire sur un composant React n'est en réalité qu'un argument passé dans une fonction :)

0 commentaires