Events in React Rating Component

29 Aug 20236 minutes to read

This section describes the rating events that will be triggered when appropriate actions are performed. The following events are available in the rating component.

beforeItemRender

The rating component triggers the beforeItemRender event before rendering each rating item. The RatingItemEventArgs passed as an event argument provides the details of the item to be rendered.

{/* Import the Rating. */}
import { RatingComponent, RatingItemEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Rating.*/}
function App() {

    function beforeItemRender(args: RatingItemEventArgs){
        //Your required action here
    }
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' beforeItemRender={ beforeItemRender } ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

created

The rating component triggers the created event when the rendering of the rating component is completed.

{/* Import the Rating. */}
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Rating.*/}
function App() {

    function created(){
        //Your required action here
    }
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' created={ created } ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

onItemHover

The rating component triggers the onItemHover event when the rating item is hovered. The RatingHoverEventArgs passed as an event argument provides the details of the hovered item.

{/* Import the Rating. */}
import { RatingComponent, RatingHoverEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Rating.*/}
function App() {

    function onItemHover(args: RatingHoverEventArgs){
        //Your required action here
    }
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' onItemHover={ onItemHover } ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

valueChanged

The rating component triggers the valueChanged event when the value of the rating is changed. The RatingChangedEventArgs passed as an event argument provides the details when value is changed.

{/* Import the Rating. */}
import { RatingComponent, RatingChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Rating.*/}
function App() {

    function valueChanged(args: RatingChangedEventArgs){
        //Your required action here
    }
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' valueChanged={ valueChanged } ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Below example demonstrates the valueChanged event of the Rating component.

index.jsx

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    function valueChanged(args) {
        alert("Previous Value:" + args.previousValue + "\nValue:" + args.value);
    }
    return (<div className='wrap'>
            <RatingComponent id='rating' valueChanged={valueChanged}></RatingComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

// Import the Rating.
import { RatingComponent, RatingChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {

    function valueChanged(args: RatingChangedEventArgs){
        alert("Previous Value:"+args.previousValue+"\nValue:"+args.value);
    }
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' valueChanged={ valueChanged } ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));