React List - Universal Actions
Universal actions are those actions that raise the same event despite being performed differently on desktop platforms and on touch-enabled devices. For example, both a click and a tap on an item raise the itemClick event. To handle it, assign a function to the onItemClick property, or subscribe to this event using the on(eventName, eventHandler) method.
jQuery
$(function() { $("#listContainer").dxList({ // ... onItemClick: function(e) { // Event handling commands go here } }); });
const itemClickEventHandler1 = function(e) { // First handler of the "itemClick" event } const itemClickEventHandler2 = function(e) { // Second handler of the "itemClick" event } $("#listContainer").dxList("instance") .on("itemClick", itemClickEventHandler1) .on("itemClick", itemClickEventHandler2)
Angular
<dx-list ... (onItemClick)="onItemClick($event)"> </dx-list>
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { onItemClick (e) { // Event handling commands go here } } @NgModule({ imports: [ // ... DxListModule ], // ... })
Vue
<template> <DxList ... @item-click="onItemClick" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList from 'devextreme-vue/list'; export default { components: { DxList }, // ... methods: { onItemClick (e) { // Event handling commands go here } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import List from 'devextreme-react/list'; const onItemClick = (e) => { // Event handling commands go here }; export default function App() { return ( <List ... onItemClick={onItemClick} /> ); }
The List supports other universal actions, which are provided as a part of basic List functionality. They are described in the following topics.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.