Ich habe folgende Komponenten.
Diese Komponente akzeptiert Requisiten, was eine Funktion ist, die aufgerufen werden kann.
deleteIcon = () => {
console.log("deleting the document");
}
export const Parent = (props) => {
return (
<button onclick={() => {deleteIcon()}}
)
}
Jetzt habe ich eine andere Komponente, die diese Komponente verwendet. die eine eigene Implementierung der Methode deleteIcon hat.
deletechildIcon = () => {
}
export const child = () => {
return (
<Parent deleteIcon={() => {deletechildIcon()}} />
)
}
Von Kind aus ruft es also immer noch die übergeordnete Methode auf und nicht die untergeordnete. kann mir jemand dabei helfen?
Einige Hinweispunkte:
onclickChildKomponente ist die, die in der aufgerufen wurde Parent, Sie haben es umgekehrtTesten Sie die Demo im Text:
const Parent = () => {
const deleteIcon = () => {
console.log("deleting the document");
};
return <Child deleteIcon={deleteIcon} />;
};
const Child = props => {
return <button onClick={props.deleteIcon}>XXX</button>;
};
ReactDOM.render(<Parent />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen