Je travaille sur un projet réactif, dans lequel j'ai app.js Ceci est composant parent. Et j'ai
un autre composant qui est enfant.js ce composant est enfant pour app.js.
i enfant.js J'ai un bouton pour que j'ai écrit une fonction lorsque quelqu'un clique sur le
bouton Sa couleur de fond changera. J'ai écrit cela dans un composant enfant.js et appliqué
à ce bouton. Maintenant, je dois changer de bouton de texte de bouton enfant.js, car j'ai écrit une fonction
dans App.js et j'essaie de transmettre cette fonction à l'enfant.js. Mais je suis incapable d'obtenir
sortie alors s'il vous plaît aidez-moi à obtenir la sortie.
Ceci est app.js ceci est enfant.js
3 Réponses :
Vous n'utilisez pas l'état code> textcolor code> n'importe où. Je suppose que vous voulez l'utiliser de cette façon:
<div>
<button className='btn btn-primary'
style={{background: bg, color: props.textColor }}
onClick={() => {color(); props.Fun()}}>Child Button</button>
</div>
Vous passez et utilisez votre fonction correctement. Si vous connectez Le problème est que vous n'utilisez actuellement pas votre variable textcolor n'importe où afin de ne pas voir le changement. Passez (Remarque: Dans ce scénario, je conserverais votre état TextColor dans votre composant enfant au lieu de l'application textcolor dans app.js Vous verriez que la couleur a fait la mise à jour de réalité.
textcolor à votre enfant comme l'aide et utilisez quelque part pour voir le changement visuellement.
)
Vous devez transmettre un accessoire à la composante enfant concernant le changement de couleur. Je vois dans votre cas, aucun access n'est envoyé à l'enfant.
https://codesandbox.io/s/access-child-component-method-react-hook-olmco?file=/src/child.js: 0-445 p>
import React, { useState } from "react";
const Child = props => {
const [bg, setBg] = useState("");
const color = () => {
setBg("red");
};
return (
<div>
<button
className="btn btn-primary"
style={{ color: props.textColor, background: bg, }}
onClick={() => {
color();
props.Fun();
}}
>
Child Button
</button>
</div>
);
};
export default Child;
Fondamentalement en cliquant sur le bouton de l'enfant, vous avez besoin de la fonction des parents à appeler?
Vous changez la couleur du texte mais vous n'utilisez pas.