ReactJS - Events

 Just like HTML, React can perform actions predicated on utilizer events. React has the same events as HTML: click, change, mouseover, etc.

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={trigger}  instead of onClick="trigger()".

Example

import React, { Component } from 'react';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: ''
        };
    }
    changeText(event) {
        this.setState({
            message: event.target.value
        });
    }
    render() {
        return (
            <div class="container">
                <h2>Simple Event Example</h2>

                <div className="form-group">
                    <label htmlFor="usr">Enter your message: </label>
                    <input type="text" id="message" onChange=

                          {this.changeText.bind(this)} />
                </div>

                <h4>You entered: {this.state.message}</h4>
            </div>
        );
    }
}
export default App;

Output:

When you execute the above code, you will get the following output.

After entering the denomination in the textbox, you will get the output as like below screen.

For more topics, click below link:

• React JS Setup, Installation, and First React Project: part 1
• ReactJS - JSX: part 2
• ReactJS - Components: part 3
• ReactJS - State and Props: part 4
• ReactJS - Component API: part 5
• ReactJS - Events : part 6
• Reactjs - Form: part 7
• ReactJS - Bootstrap - Buttons: part 8
• ReactJS - Bootstrap - Table: part 9
• ReactJS - Keys: part 10

CRUD

• React J+Node JS+Express+MongoDB CRUD:MERN Stack development 
• Kotlin + Spring Boot + React JS + MongoDB CRUD - Full stack development
• React JS+SpringBoot+RDBMS-CRUD:Full-stack development foundation
• React.js + Python + MongoDB CRUD application