Mein onChange funktioniert nicht mit reagieren

Question

Ich habe diese documentation gefolgt und haben ein Select-Tag mit reagieren erstellt.
Ich habe diese Frage bearbeitet, Wenn ich className = "browser-default" in auswählen, funktioniert es gut. Aber für materialisieren wählen Sie, es funktioniert nicht.
OnChange-Ereignis funktioniert nicht in meinem Fall. Die Funktion wird nicht aufgerufen.

import React from 'react'; 

class Upload extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
      degree:'' 
     } 
     this.upload=this.upload.bind(this); 
     this.degreeChange=this.degreeChange.bind(this); 
    } 
    componentDidMount() { 
     $('select').material_select(); 
    } 
    degreeChange(event){ 
     this.setState({degree:event.target.value}); 
     console.log(this.state.degree); 
    } 
    upload(){ 
     alert(this.state.degree); 
    } 
    render() { 
     return (
      <div className="container"> 
      <form onSubmit={this.upload}> 
       <div className="input-field col s4"> 
         <select value={this.state.degree} onChange={this.degreeChange}> 
          <option value="" disabled>Choose Degree</option> 
          <option value="B.E">B.E</option> 
          <option value="B.Tech">B.Tech</option> 
         </select> 
       </div> 
       <div className="row center-align"> 
        <input className="waves-effect waves-light btn centre-align" type="submit" value="Submit"/> 
       </div> 
      </form> 
     </div> 
     ); 
    } 
} 

Ich habe nicht einen Fehler hier, aber meine degreeChange Funktion nicht aufgerufen wird. Ich verstehe nicht, was mein Fehler ist.

Answer 1

Es ist nichts falsch mit Ihrem Code. Bist du sicher, dass es nicht funktioniert? Vielleicht nehmen Sie an, dass der eingestellte Zustand synchron ist, wenn es nicht synchron ist. Versuchen Sie, die target.value zu protokollieren. Sie können den Zustandswert auch in einem Callback zu Ihrem setstate ausdrucken.

degreeChange(event){ 
    console.log(`event value is ${event.target.value}`); 
    this.setState({degree:event.target.value},() => { 
     console.log(this.state.degree); 
    }); 
} 

Fiddle of your exact code versuchen, das Element zu ändern. Sie werden sehen, dass dieser Zustand hinter einem liegt. Das liegt daran, dass der Zeitpunkt, zu dem Sie den Status drucken, den Renderzyklus noch nicht abgeschlossen hat und der Status nicht aktualisiert wurde.

Fiddle of my changes