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.

More...

Comments