Ich habe ein kleines Problem mit React. Ich habe meinem Projekt die folgende Erweiterung hinzugefügt: https://www.npmjs.com/package/react-contextmenu
Können Sie mir erklären, warum console.log im "MenuItem" nicht funktioniert, aber außerhalb?
<ContextMenu id="test">
<MenuItem>
{/* no console log :( */}
<a onClick={(e)=>{e.preventDefault();console.log("Inside MenuItem");}}>Click Me</a>
</MenuItem>
{/* console log works */}
<a onClick={(e)=>{e.preventDefault();console.log("Inside MenuItem");}}>Click Me</a>
</ContextMenu>
Antworten:
0 für die Antwort № 1Funktioniert die Datei console.log außerhalb des Kontextmenüs? Können Sie das zuerst testen?
0 für die Antwort № 2
Ich habe ein paar Nachforschungen angestellt und es gibt einen Fehler im Kontextmenü
Deshalb raten die Entwickler aus dem Kontextmenü dazu:
function handleClick(e, data) {
console.log (data.foo); }
Funktion MyApp () { Rückkehr (
<ContextMenuTrigger id="some_unique_identifier">
<div className="well">Right click to see the menu</div>
</ContextMenuTrigger>
<ContextMenu id="some_unique_identifier">
<MenuItem data={{foo: "bar"}} onClick={this.handleClick}>
ContextMenu Item 1
</MenuItem>
<MenuItem data={{foo: "bar"}} onClick={this.handleClick}>
ContextMenu Item 2
</MenuItem>
<MenuItem divider />
<MenuItem data={{foo: "bar"}} onClick={this.handleClick}>
ContextMenu Item 3
</MenuItem>
</ContextMenu>
</div>
); }
So führen Sie die Datei console.log außerhalb in einer anderen Methode aus:
Überprüfen Sie die Git isue
https://github.com/vkbansal/react-contextmenu/issues/161
Es gab keine Lösung und das ist noch nicht lange her Ich glaube also nicht, dass Sie der falsche Code sind.
0 für die Antwort № 3
Versuche diesen Weg:
<ContextMenu id="test">
<MenuItem onClick={(e)=>{e.preventDefault();console.log("Inside MenuItem");}}>
Click Me
</MenuItem>
</ContextMenu>
0 für die Antwort № 4
Sie müssen das Standardverhalten des Links verhindern:
<a onClick={(e)=>{e.preventDefault();console.log("Inside MenuItem");}}>Click Me</a>
Sie müssen auch onClick as Requisiten in MenuItem Component anhängen. Hier ist ein Beispiel für MenuItem, mit dem onClick als Requisite angehängt wird:
const MenuItem = props => {
// ...other holds all other props except desiredProps
const { disiredProps, ...other } = props;
// ...other holds onClick props
return <div {...other}>{other.children}</div>
// ^^ onClick is passed as props
}
</ strike>
Da die MenuItem-Komponente ein Teil der react-contextmenukönnen Sie die Ereignisbehandlungsroutine nicht innerhalb von zuweisenKinder, da Sie nicht direkt an der MenuItem-Komponente arbeiten können, um die Ereignisbehandlungsroutine für Kinder als Requisiten zu kennzeichnen. Sie müssen lediglich den Handler in MenuItem selbst definieren:
<MenuItem onClick={(e) => {e.preventDefault();e.stopPropagation();console.log("Inside MenuItem");}}>
<a>Click MenuItem</a><!-- though unnecessary link tag -->
</MenuItem>