OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

My onChange not working with react

  • Thread starter Thread starter sudheesh shetty
  • Start date Start date
S

sudheesh shetty

Guest
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.

Code:
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.

<p>I have followed this <a href="https://facebook.github.io/react/docs/forms.html#why-select-value" rel="nofollow noreferrer">documentation</a> and have created a select tag with react.<br>
I have edited this question, If I use className="browser-default" in select it works fine. But for materialize select it is not working.<br>
onChange event is not working in my case. The function doesn't get called.</p>

<pre><code>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>
);
}
}
</code></pre>

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

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top