onChange function for input fields not working

Question

Trying to change the state of input fields but onChange doesn't seem to be working and input fields are disabled (not letting me type)

constructor() {
    super();
    this.state = {
        title: '',
        length: '',
        image: '',
        source: '',
        available: '',
        date: '',
        errors: {}
    }
    this.onChange = this.onChange.bind(this);
}

onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
}

<input value={this.state.length} onChange={this.onChange} type="text" 
    className="form-control" name="email" placeholder="e.g. 3:36" />

this.onChange = this.onChange.bind(this); meant to put this in the post, my b, I already binded that shit — OpenMeyends
– OpenMeyends, Commented Jan 9, 2019 at 22:29

Treycos · Accepted Answer · 2019-01-09 22:30:13Z

3

2 things :

Your setState function updates a value in the state based on the event's target node name, and here, the name ("email") does not match the value you are getting in your state (length).

The second error is that your onChange is not bound to your class, calling this.setState will return an error.

You can solve it by changing the value variable in your input :

<input value={this.state.email} onChange={this.onChange} type="text" className="form-control" name="email" placeholder="e.g. 3:36"/>

And converting onChange to an arrow function (or binding it) :

onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
}

answered Jan 9, 2019 at 22:30

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OpenMeyends Over a year ago

Thanks fam, should've caught this! Appreciate ya

Tarreq · Accepted Answer · 2019-01-09 23:36:07Z

0

** UPDATED: ** your main fault, is your are linking your input to a state variable called "length", and the name of the input is "email", they should be the same.

You can make it easier for yourself, you don't need to bind at constructor at all, IF you use arrow functions, so, if your write your function like this:

onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}

your constructor and state, will be like this:

constructor() {
     super();
 this.state = {
    title: '',
    email: '',
    image: '',
    source: '',
    available: '',
    date:'',
    errors: {}
}

}

And, in JSX, you still pass your properties the same way, like this:

<input value={this.state.email} onChange={this.onChange} type="text"
        className="form-control" name="email" placeholder="e.g. 3:36" />

Full working demo:

edited Jan 9, 2019 at 23:36

answered Jan 9, 2019 at 22:46

Tarreq

1,3551 gold badge10 silver badges18 bronze badges

3 Comments

OpenMeyends Over a year ago

Cool thanks, I like this; using arrow function. Although, this still isn't working. The text inputs are still disabled and not letting me type anything... I can't really figure out why this is happening..

Tarreq Over a year ago

That's because in your code your're linking your input value to : {this.state.length} and the input name is : "name="email" they should be the same, check my updated answer for full working code

OpenMeyends Over a year ago

Thanks Fam! Appreciate the help

Collectives™ on Stack Overflow

onChange function for input fields not working

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related