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 (
90 | <button className="square"
91 | //onClick={()
=> this.handleClick()} //own click()
> 92
| onClick={() => this.props.onClick()} //parent
onClick
| ^ 93 | >
94 | {this.props.value}
95 | </button>
|
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 >------------
|