Reagieren + Karte + Taste nicht

Question

Basisfunktionalität funktioniert.

1. Drucken Sie eine Liste DONE
2. eine Schaltfläche, um jede Liste hinzufügen DONE
3. Taste eine bestimmte Funktion aufrufen. JETZT ARBEITEN !!!

THANKS ALL OF YOU GUYS! - 30/10/2017 - I found solution. In the end of const renderItems, I just added a simple this and works. of course, I forgot in this sample to add this.handleClick = this.handleClick.bind(this); on constructor. So now, is working to me

Ich habe bereits Forschung darüber, und die beste Lösung, die ich war hier: Aber jedes Mal, wenn ich versuche, diese Anleitung zu verwenden: https://reactjs.org/docs/handling-events.html

Aber ich bekomme immer die Fehlermeldung:

Uncaught TypeError: Cannot read property 'handleClick' of undefined

und ich kann nicht verstehen, warum. Was habe ich falsch gemacht?

import React, { Component } from 'react'; 
 
import axios from 'axios'; 
 

 
class myApp extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      repos: [] 
 
     }; 
 
     this.handleClick = this.handleClick.bind(this); // ADDED 
 
    } 
 

 
    componentDidMount() { 
 
     var $this = this; 
 
     var URL = JSON; 
 

 
     axios.get(URL).then(function(res) { 
 
      $this.setState({ 
 
       repos: res.data 
 
      }); 
 
     }) 
 
     .catch(function(e) { 
 
      console.log("ERROR ", e); 
 
     }); 
 
    } 
 

 
    handleClick() { 
 
     console.log('this is:', this); 
 
    } 
 

 
    render() { 
 
     const renderItems = this.state.repos.map(function(repo, i) { 
 
      return <li 
 
        key={i}> 
 
        <a onClick={(e) => this.handleClick(e)} >Click here!</a> 
 
        <span className='repoName'> 
 
         {repo.full_name} 
 
        </span> 
 
        <hr /> 
 
       </li> 
 
     }, this); // just added THIS! 
 

 
    return (
 

 
     <ul> 
 
       {renderItems} 
 
     </ul> 
 
     <section className='target'> 
 
       Target 
 
     </section> 
 
    ); 
 
    } 
 
} 
 

 
export default myApp;

Answer 1

Sie erhalten einen nicht definierten Fehler, weil Sie einen fehlenden Parameter e in Ihrer Methodendefinition haben. handleClick() ohne Parameter hat eine andere Identität als handleClick(e).

Bind handleClick in Ihrem Konstruktor: this.handleClick = this.handleClick.bind(this);

dann die onClick prop zu onClick={this.handleClick} ändern. Nie Pfeil Funktionen innerhalb der render Funktion zu verwenden, dies schafft neue Identität der Funktion auf jedem Wieder machen die schlechte Praxis und könnte zu Leistungsproblemen führen, wie Ihre Anwendung wächst.

Sie können auch die experimentelle public class fields syntax verwenden, dann können Sie Ihre Click-Handler wie so definieren;

handleClick = (e) => { 
 
    // Stuff 
 
}

wie diese, brauchen Sie keine Bindung zu tun und Sie können gerade auf this.handleClick in Ihrem onClick prop.

Answer 2

Ihre this innerhalb von (e) => this.handleClick(e) ist nicht Klasse this. Genau das tun, es auf diese Weise onClick={this.handleClick} .Diese Art und Weise Sie Click-Ereignis innerhalb this in handleClick Funktion haben. Wenn Sie Klasse wollen this innerhalb handleClick, als es tun this.handleClick.bind(this)