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.

CRUD

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Spring Boot + Apache Commons Export Data to CSV Example