#

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 >------------

 

 

Mobile

.

0123movie.net