私のonChangeが反応していない

Question

私はこれに続いてdocumentationと反応してselectタグを作成しました。
私はこの問題を編集しました。selectでclassName = "browser-default"を使用すると問題なく動作します。しかし、マテリアライズするためには選択されていません。
私の場合、onChangeイベントが機能していません。この関数は呼び出されません。

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> 
     ); 
    } 
} 

ここでエラーは発生しませんが、私のdegreeChange関数は呼び出されません。私は私の誤りが何かを得ていない。

Answer 1

コードに問題はありません。あなたはそれが動作しないと確信していますか？多分、あなたはセット状態が同期していないと仮定しています。 target.valueを記録してみてください。 setstateへのコールバックで状態値を出力することもできます。

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周囲の項目を変更してみてください。あなたはその状態が背後にあるように見えます。これは、印刷中の瞬間がレンダリングサイクルを終了せず、状態が更新されていないためです。

Fiddle of my changes