DOMHelper
In React , we do not recommend direct manipulation of the DOM, but inside the RSUITE component, you have to directly manipulate the DOM for some considerations. If you have similar requirements, you can use this method directly.
Import
import { DOMHelper } from 'rsuite';APIs
class
hasClass: (node: HTMLElement, className: string) => boolean;
addClass: (node: HTMLElement, className: string) => HTMLElement;
removeClass: (node: HTMLElement, className: string) => HTMLElement;
toggleClass: (node: HTMLElement, className: string) => HTMLElement;style
addStyle: (node: HTMLElement, property: string, value: string) => void;
addStyle: (node: HTMLElement, style: Object) => void;
removeStyle: (node: HTMLElement, property: string) => void;
removeStyle: (node: HTMLElement, propertys: Array<string>) => void;
getStyle: (node: HTMLElement, property: string) => string;
getStyle: (node: HTMLElement) => Object;
events
on: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => {off: Function};
off: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => void;scroll
scrollLeft: (node: HTMLElement) => number;
scrollLeft: (node: HTMLElement, value: number) => void;
scrollTop: (node: HTMLElement) => number;
scrollTop: (node: HTMLElement, value: number) => void;query
getHeight: (node: HTMLElement, client: HTMLElement) => number;
getWidth: (node: HTMLElement, client: HTMLElement) => number;
getOffset: (node: HTMLElement) => Object;
getOffsetParent: (node: HTMLElement) => HTMLElement;
getPosition: (node: HTMLElement, offsetParent: HTMLElement) => Object;
contains: (context: HTMLElement, node: HTMLElement) => boolean;DOMMouseMoveTracker
Mouse drag tracker
new DOMMouseMoveTracker(
onMove:(deltaX: number, deltaY: number, moveEvent: Object) => void,
onMoveEnd:() => void,
container: HTMLElement
);