我的 onChange 不适用于反应

我已经关注了这个文档 https://facebook.github.io/react/docs/forms.html#why-select-value并使用 React 创建了一个选择标签。
我已经编辑了这个问题，如果我在选择中使用 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 函数没有被调用。我不明白我的错误是什么。

你的代码没有任何问题。你确定它不起作用吗？也许您假设设置状态是同步的，但事实并非如此。尝试记录target.value。您还可以在 setstate 的回调中打印状态值。

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

小提琴你的确切代码 https://jsfiddle.net/jwm6k66c/2531/尝试改变周围的项目。你会看到那个州似乎落后了。那是因为您打印状态的那一刻尚未完成其渲染周期并且状态尚未更新。

小提琴我的改变 https://jsfiddle.net/jwm6k66c/2532/