React.js onclick event: Ich kann die Eigenschaft 'requisiten' von undefined nicht lesen

Question

Ich bin ein Anfänger in der Reaktionsumgebung, daher mag meine Frage für viele von Ihnen grundlegend erscheinen. Aber glauben Sie mir, ich habe mich in diesem Teil festgefahren. Ich versuche, den Textfeld-Wert beim Klicken auf die Schaltfläche zu erhalten und den Wert an eine andere Funktion als Prop zu senden. Ich bin in der Lage, den Wert von Textfeld Feld zu extrahieren, aber auf dem Click-Ereignis, bekomme ich einen Fehler 'Property' Property von 'undefined' kann nicht gelesen werden.

hier sind die wichtigen Punkte: -

1. termchange() wird zum Extrahieren des Eingabetextwert verwendet.
2. handleclick wird zum Extrahieren von Textbox-Wert onclick-Ereignis verwendet.
3. oncitychange ist eine Funktion, an die ich den Wert der Textbox senden muss (oncitychange() - Funktion ist in einer anderen Komponente).

Vielen Dank im Voraus.

hier ist mein Code: -

import React,{ Component } from 'react'; 
import ReactDom from 'react-dom'; 
class SearchBar extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     cityname:'' 
    } 
    } 

    render(){ 
    return(
     <div> 
     <span>Enter the city: </span> 
     <input type="text" id="txtbox" value={this.state.cityname} 
      onChange={event=>this.termchange(event.target.value)} /> 
     <input type="submit" onClick={this.handleclick} /> 
     </div> 
    ); 
    } 

    termchange(cityname){ 
    this.setState({cityname}); 
    } 

    handleclick(){ 
    this.props.oncitychange(cityname); 
    } 
} 

export default SearchBar; 

Answer 1

Es geht um Umfang. Ihre Funktionen wissen nicht, was this ist. Sie können this im Konstruktor binden oder andere Optionen sind je nach Umgebung einfacher.

zu Ihrem Konstruktor hinzufügen, dies zu beheben:

this.termchange = this.termchange.bind(this); this.handleclick = this.handleclick.bind(this);

Oder lesen https://blog.andrewray.me/react-es6-autobinding-and-createclass/ für eine ausführlichere Erklärung, was los ist.

Ich persönlich benutze ES7 fette Pfeil Klassenmethoden für die Einfachheit und ich denke, die meisten Entwickler bewegen sich in diese Richtung.

Answer 2

hinzufügen this.handleClick = this.handleClick.bind(this) bei Konstruktor

Answer 3

Ersetzen Sie einfach onClick={this.handleClick} von:

onClick={this.handleClick.bind(this)} 

Auf diese Weise der Funktionsumfang wird