react 防误触实现

AntiMissing.tsx

import React from 'react';

export type AntiMissingProps = {
  once?: boolean;
  timeout?: number;
  eventName?: string;
};

const defaultOption = { eventName: 'onClick', timeout: 1000, once: false };

const AntiMissing = (option: AntiMissingProps) => {
  const { eventName, timeout, once } = { ...defaultOption, ...option };
  return (WrappedComponent: any) => {
    class AntiMissingComponent extends React.PureComponent<any, any> {
      _disabled: boolean = false;

      onAntiMissing = (...args: any[]) => {
        if (this._disabled) return;
        this._disabled = true;
        setTimeout(() => (this._disabled = once || false), timeout);
        this.props[eventName!] && this.props[eventName!].apply(this, args);
      };

      render() {
        const props = (this as AntiMissingComponent).props;
        return <WrappedComponent {...props} {...{ [eventName!]: this.onAntiMissing }} />;
      }
    }

    return AntiMissingComponent;
  };
};

export default AntiMissing;