Question

我已按照此documentation创建了一个带反应的选择标记我编辑了这个问题，如果我在选择中使用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

Answer 2

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

我的onChange没有使用react

2 个答案: