2

I have followed this documentation and have created a select tag with react.
I have edited this question, If I use className="browser-default" in select it works fine. But for materialize select it is not working.
onChange event is not working in my case. The function doesn't get called.

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

I don't get any error here, but my degreeChange function doesn't get called. I am not getting what my error is.

sudheesh shetty
  • 358
  • 4
  • 14
  • Possible duplicate of [OnChange event using React JS for drop down](http://stackoverflow.com/questions/28868071/onchange-event-using-react-js-for-drop-down) – John Ruddell Apr 16 '17 at 06:35
  • @JohnRuddell, i think this ques is not duplicate of the link you pasted, this is related to **asynchronous nature of setState**, this is not having any `onChange` issue. – Mayank Shukla Apr 16 '17 at 06:42
  • Possible duplicate of [How to get the latest value from selected drop down](http://stackoverflow.com/questions/39506293/how-to-get-the-latest-value-from-selected-drop-down) – Shubham Khatri Apr 16 '17 at 06:43
  • Possible duplicate of [Why calling setState method doesn't mutate the state immediately?](http://stackoverflow.com/questions/42593202/why-calling-setstate-method-doesnt-mutate-the-state-immediately) – Mayank Shukla Apr 16 '17 at 06:51
  • @MayankShukla it is a duplicate because its a valid working example identical to the OP's issue. The Op just doesn't understand the nature of set state – John Ruddell Apr 16 '17 at 07:06
  • I get that the question is slightly different. anyone that does a simple google search can find that answer. and if that answer is accepted and works it means that the setstate is working. thats all im saying :) – John Ruddell Apr 16 '17 at 07:54

2 Answers2

0

There is nothing wrong with your code. Are you sure its not working? Maybe you are assuming set state is synchronous when its not. Try logging the target.value. you can also print the state value in a callback to your 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 try changing the item around. you will see that state seems to be one behind. thats because the moment where you are printing it state hasn't finished its render cycle and the state has not updated.

Fiddle of my changes

John Ruddell
  • 25,283
  • 6
  • 57
  • 86
  • I see that it is working in fiddle. But it is not working in my case. even the console.log before setState is not working. Looks like as if the degreeChange function itself is not getting called. – sudheesh shetty Apr 18 '17 at 18:04
  • I am using select from `http://materializecss.com/forms.html` I have my '$('select').material_select();' in componentDidMount() method. If I make it default-select then it is working fine. – sudheesh shetty Apr 18 '17 at 18:10
  • you shouldn't be using jquery with react. they are counter productive as they both do the same thing in a lot of cases – John Ruddell Apr 18 '17 at 18:38
  • If I dont add '$('select').material_select();' in componentDidMount() then my select wont work properly. Is htere any workaround for that? – sudheesh shetty Apr 19 '17 at 09:08
  • any alternative for that @John – sudheesh shetty Apr 21 '17 at 06:43
  • i would use react material ui and drop jquery and the material_select http://www.material-ui.com/#/ – John Ruddell Apr 21 '17 at 06:46
0

I think the problem is with binding methods. In your field, change the onChange property like this. onChange={this.degreeChange.bind(this)}

isuru_sathsara
  • 1
  • 1