function keyword in class based component and inChange event

Question

Can anyone please help me understand if there's any issue with the below code snippet:

import React, { Component } from "react";


class AddContactForm extends Component {

    constructor() {
        super();
        this.state = {
            name: "",
            email: "",
            number: ""
        }
    }

    handleOnChange(event) {
        console.log("Hi");
        console.log(event.target.id);
        console.log(event.target.value);
    }

    render() {
        return (
            <React.Fragment>
                <div className="mx-auto">
                    <div class="mb-3 row">
                        <label for="username" class="col-sm-2 col-form-label">Name</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" onChange={this.handleOnChange.bind(this)}/>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="mobileNumber" class="col-sm-2 col-form-label">Mobile Number</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="mobileNumber" onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="emailId" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="emailId" onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <button className="btn btn-primary w-25">Add</button>
                </div>
            </React.Fragment>
        )
    }
}

export default AddContactForm;

I am facing the problems below:

1 - unable to use function keyword with handleOnChange method

2 - none of my inputs are firing the onChange event. I am unable to get any logs in the console as added in HandleOnChange method.

Thanks.

score 0 · Answer 1 · answered Sep 24 '21 at 04:45

In your constructor bind all the methods.

  constructor() {
     super();
     this.state = {
         name: "",
         email: "",
         number: ""
     }
      this.handleOnChange: this.handleOnChange.bind(this)
   }

And in your inputs use like this <input onClick={this.handleOnChange} />

Mohamed abdelmagid · Answer 2 · 2021-09-24T06:14:18.783

You have few errors in your code aside from the one @Muhammad pointed out, some attribute names were altered in to avoid conflict for jsx so:

class became className
for became htmlFor with the label element a similar problem here.

It's also worth noting that, using arrow function is favored over using bind, so you create the function normally as an arrow function.

handleOnChange = (event) => {
    console.log("Hi");
    console.log(event.target.id);
    console.log(event.target.value);  
};

and make onChange call it.

onChange={this.handleOnChange}

You can refer for this codesandbox for a demo, you may also want to read these two questions here:

function keyword in class based component and inChange event

2 Answers2