Handle Events in React

Today we will cover how to handle events in react js. Event handlers are used to determine what action is to be taken whenever an event is fired. This could be a mouse click or a change in a text input.

In React apps, events are written in the camelCase format, that means the onclick event will be written as onClick in a React app.

In actuality, React doesn’t attach event handlers to the nodes themselves.

Handle events in React, react passing arguments to event handlers, A New Way to Handle Events in React, onChange or onClick event handler in React, React onClick pass parameter, Binding events in react, Handle events by arrow functions in React, How To Pass parameter in Events, Pass parameter on button click in React.

Ways to handle events in React JS

1. Inline method binding
2. Bind method in constructor
3. Method binding using arrow function
4. Bind method parameters
5. Binding method with parameters using arrow function

Before we start it, we need to create component in react js so if you don't know what is react and how to create component in react then please refer the links

1. Inline method binding

Here we are going to bind method on input change event in render method.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        }
    }

    inputChange(e){
        this.setState({ input: e.target.value });
    }

    render() {
        return(
            <div>
                <p>Binding method</p>
                <input onChange={this.inputChange.bind(this)}></input><br />
                <p>Input value: {this.state.input}</p>
            </div>
        );
    }
}

2. Bind method in constructor

In below example we are going to bind method in the constructor.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        }
        this.inputChange = this.inputChange.bind(this);
    }

    inputChange(e){
        this.setState({ input: e.target.value });
    }

    render() {
        return(
            <div>
                <p>Binding method in constructor</p>
                <input onChange={this.inputChange}></input><br />
                <p>Input value: {this.state.input}</p>
            </div>
        );
    }
}

3. Method binding using arrow function

Now we are going to bind method using arrow function.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        }
    }

    inputChange(e){
        this.setState({ input: e.target.value });
    }

    render() {
        return(
            <div>
                <p>Binding method with arrow function</p>
                <input onChange={(e) => this.inputChange(e)}></input><br />
                <p>Input value: {this.state.input}</p>
            </div>
        );
    }
}

4. Bind method parameters

Now let’s say if you want to pass some parameters during binding then you can follow below method.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        }
    }

    inputChange(p1, p2, e){
        console.log('Param1: ', p1);
        console.log('Param2: ', p2);
        this.setState({ input: e.target.value });
    }

    render() {
        return(
            <div>
                <p>Binding method with parameters</p>
                <input onChange={this.inputChange.bind(this, 'Parameter 1', 'Parameter 2')}></input><br />
                <p>Input value: {this.state.input}</p>
            </div>
        );
    }
}

5. Binding method with parameters using arrow function

If you want to use arrow function then you can write below code to handle events.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        }
    }

    inputChange(p1, p2, e){
        console.log('Param1: ', p1);
        console.log('Param2: ', p2);
        this.setState({ input: e.target.value });
    }

    render() {
        return(
            <div>
                <p>Binding method with parameters using arrow function</p>
                <input onChange={(e) => this.inputChange('Parameter 1', 'Parameter 2', e)}></input><br />
                <p>Input value: {this.state.input}</p>
            </div>
        );
    }
}