Uncaught ReferenceError: handleClick ist nicht definiert - Reagieren
Gehe ich direkt auf den Punkt. Dies ist die Komponente, auf die ich in einem ReactJS Anwendung:
class BooksList extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
e.preventDefault();
console.log("The link was clicked");
}
render() {
return (
<div>
<a className="btn btn-success" onClick={handleClick}>
Add to cart
</a>
</div>
);
}
}
Warum erhalte ich die folgende Fehlermeldung, wenn die Komponente geladen ist?
Uncaught ReferenceError: handleClick is not defined
EDIT:
Nachdem Sie Antworten, änderte ich meinen code zu diesem:
handleClick(e) {
e.preventDefault();
console.log("Item added to the cart");
}
renderBooks(){
return this.props.myBooks.data.map(function(book){
return (
<div className="row">
<table className="table-responsive">
<tbody>
<tr>
<td>
<p className="bookTitle">{book.title}</p>
</td>
</tr>
<tr>
<td>
<button value={book._id} onClick={this.handleClick}>Add to cart</button>
</td>
</tr>
</tbody>
</table>
</div>
);
});
}
}
render() {
return (
<div>
<div>
<h3>Buy our books</h3>
{this.renderBooks()}
</div>
</div>
);
}
Wie Sie sehen können, habe ich .map
die Iteration durch eine Liste der Bücher.
Für jedes der Bücher habe ich einen button, der, wenn darauf geklickt wird, fügen Sie die spezifischen Buch des Benutzers Warenkorb.
Wenn ich follow @Tharaka Wijebandara Antwort, ich kann einen button funktioniert außerhalb .map
aber in diesem Fall habe ich immer noch den Fehler:
Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined
at http://localhost:8080/bundle.js:41331:89
at Array.map (native)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Lösung für das Problem, das Sie erwähnt in Teil Bearbeiten.
Grund ist, Sie verlieren die
context
immap
callback-Funktion, die Sie brauchen, umbind
diesem (Klasse, Kontext) mit callback-Funktion oder Verwenden Siearrow function
, es löst Ihr Problem.Mithilfe Pfeil-Funktion:
Oder verwenden Sie
.bind(this)
mit callback-Funktion, wie diese:Verwenden
this.handleClick
und Sie haben vergessen hinzufügen
e
als argument in IhremhandleClick
Methode.Hinzufügen @Tharaka Wijebandara Antworten, können Sie alternativ erklären Funktion als
const
wie folgt:wo
handleClick
ist definiert als: