Javascript 我的onChange不与react一起工作

我遵循这一点，创建了一个带有react的select标记。
我已经编辑了这个问题，如果我在“选择”中使用className=“browser default”，它可以正常工作。但对于materialize select，它不起作用。
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>
        );
    }
}

从“React”导入React；
类上载扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
学位：''
}
this.upload=this.upload.bind（this）；
this.degreeChange=this.degreeChange.bind（this）；
}
componentDidMount（）{
$（'select'）。材料选择（）；
}
度数变化（事件）{
this.setState（{degree:event.target.value}）；
console.log（this.state.degree）；
}
上传（）{
警报（此状态、程度）；
}
render（）{
返回(
选择学位
理学学士
B.技术
);
}
}

---

我在这里没有得到任何错误，但是我的degreeChange函数没有被调用。我不明白我的错误是什么

您的代码没有问题。你确定它不起作用吗？也许您假设设置状态是同步的，但它不是。尝试记录

目标.value

。您还可以在回调中将状态值打印到setstate

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

试着改变周围的项目。你会发现这个州似乎落后了一步。这是因为打印时，状态尚未完成渲染周期，并且状态尚未更新

---

您的代码没有问题。你确定它不起作用吗？也许您假设设置状态是同步的，但它不是。尝试记录

目标.value

。您还可以在回调中将状态值打印到setstate

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

试着改变周围的项目。你会发现这个州似乎落后了一步。这是因为打印时，状态尚未完成渲染周期，并且状态尚未更新

---

我认为问题在于绑定方法。在您的字段中，像这样更改onChange属性。onChange={this.degreeChange.bind（this）}

我认为问题在于绑定方法。在您的字段中，像这样更改onChange属性。onChange={this.degreeChange.bind（this）}

可能重复@JohnRuddell，我认为这不是您粘贴的链接的重复，这与setState的异步性质有关，这没有任何

onChange

问题。可能重复@MayankShukla的可能重复。这是一个重复，因为它是一个与OP问题相同的有效工作示例。Op只是不理解set state的性质@JohnRuddell的可能重复，我认为这不是您粘贴的链接的重复，这与setState的异步性质有关，这没有任何

onChange

问题。可能重复@MayankShukla的可能重复。这是一个重复，因为它是一个与OP问题相同的有效工作示例。Op就是不理解set状态的本质，我看它是在胡闹。但对我来说，它不起作用。甚至setState之前的console.log也不起作用。看起来好像没有调用degreeChange函数本身。我正在使用select from

http://materializecss.com/forms.html

我有我的“$（'select'）.material_select（）；”在componentDidMount（）方法中。如果我将其设置为默认的select，那么它工作得很好。如果我不加“$（'select'）。material_select（）；”的话，它们会适得其反，因为它们在很多情况下都做相同的事情在componentDidMount（）中，则我的选择无法正常工作。有什么解决办法吗？有什么替代办法吗@JohnI请看，它是用小提琴演奏的。但对我来说，它不起作用。甚至setState之前的console.log也不起作用。看起来好像没有调用degreeChange函数本身。我正在使用select from

http://materializecss.com/forms.html

我有我的“$（'select'）.material_select（）；”在componentDidMount（）方法中。如果我将其设置为默认的select，那么它工作得很好。如果我不加“$（'select'）。material_select（）；”的话，它们会适得其反，因为它们在很多情况下都做相同的事情在componentDidMount（）中，则我的选择无法正常工作。这有什么解决办法吗？约翰，还有其他办法吗