Свойство rawValue не существует при ошибке типа EventTarget & HTMLInputElement при использовании машинописного текста с расщеплением. js

Question

У меня указанная выше ошибка в событии onChange при использовании cleave с машинописным текстом. Ts выдает ошибку, заявляя, что в event.target нет rawValue. Мой код выглядит следующим образом:

import React, { useCallback, useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { StyledCleaveInput } from './style';
import { getCleaveOptions } from './helper';

interface Props {
  error?: string;
  id?: string;
  value?: string;
  onChange?: (arg: any) => any;
  disabled?: boolean;
  placeholder?: string;
  deviceType?: string;
  additional?: object;
}

const FormattedNumberInput: React.FC<Props> = (props): JSX.Element => {
  const { id, placeholder, onChange, error, disabled, deviceType, value } = props;

  type cleaveState = {
    setRawValue: (arg: any) => any
  };

  const [cleave, setCleave] = useState<cleaveState | null>(null);

  const options = useMemo(() => getCleaveOptions(props), []);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );

  useEffect(() => {
    if (cleave && value) cleave.setRawValue(value);
  }, [cleave, value]);

  return (
    <StyledCleaveInput
      data-id={id}
      placeholder={placeholder}
      isError={error}
      disabled={disabled}
      deviceType={deviceType}
      onChange={handleChange}
      options={options}
      onInit={setCleave}
    />
  );
};

FormattedNumberInput.propTypes = {
  error: PropTypes.string,
  id: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  placeholder: PropTypes.string,
  deviceType: PropTypes.string,
  additional: PropTypes.object,
};

export default FormattedNumberInput;

Ошибка: event.target.rawValue handleChange StyledCleaveInput, импортированный выше, использует ввод 'cleave. js', и, следовательно, мы можем иметь event.target.rawValue внутри объект события доступен в onChange ввода. Установлен @@ types / cleave, но ошибка все еще есть.

Заранее благодарим за помощь

Answer 1

Похоже, вы используете библиотеку Cleave. js. В этом случае для метода обработчика событий handleChange не следует использовать HTMLInputElement в качестве параметра типа для ChangeEvent. Вместо этого вам может потребоваться использовать Cleave (или любой эквивалент, поскольку я не слишком знаком с этой библиотекой) в качестве параметра типа.

const handleChange = useCallback(
  (event: React.ChangeEvent<Cleave>) => {
    if(onChange){
      onChange(event.target.rawValue);
    }
  },
  [onChange]
);

Answer 2

после долгих исследований, я получил ответ, реализовав свой собственный ChangeEvent следующим образом:

interface ChangeEvent<T> extends React.ChangeEvent<T> {
  target: { rawValue: string } & EventTarget & T;
}

, а затем использую его следующим образом:

const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );