React Fehler: Type
Fehlermeldung in React :
|
TypeError: this.props.onClick is not a function onClick D:/Programmierung/Web/Demo/React01/React01/ClientApp/src/components/Game_TicTocToe.js:92 89 | return (
|
Lösung:
Man muss einen onClick() Event im Aufrufenden Code definieren.
Hinweis: die this.props.onEvent() sagt aus, dass beim Verwenden der Componente gleichzeitig die Funktion definiert wird.
Einfache Lösung:
In Parent Component die Function onClick erstellen
Parent Code
Das Parent Element ruft eine Child-Componente <Square…> auf und wie gezeigt fehlt beim Aufruf das ausgeblendete onClick={..Definition..}
Lösung: hier den onClick beim Erstellen mit übergeben. Das Wort this. zeigt auf einen Event im Parent selbst.
Deshalb muss die this.onClick-Function in dem Aufrufer definiert werden. (hier mit // auch ausgeblendet
|
class Board extends React.Component {
constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } renderSquare(i) { return ( <Square value={this.state.squares[i]} //onClick={() => this.handleClick(i)} />); }
// handleClick(i) { // const squares = this.state.squares.slice(); // squares[i] = 'X'; // this.setState({ squares: squares }); // }
|
Child Component Code
Notiz: das Child versucht den Event vom Parent Aufrufer auszuführen.
Der event this.props.onClick() bedeutet, dass dieser beim Aufruf vom Parent-Caller definiert wird.
|
//----------< Child_Component >------------ class Square extends React.Component {
render() { return ( <button className="square" //onClick={() => this.handleClick()} //own click() onClick={() => this.props.onClick()} //parent onClick > {this.props.value} </button> ); } } //----------</ Child_Component >------------
|
Users by Links
Follow-Follower
Log in
Register
CodeDocu_com
