属性 'rawValue' does not exist on type 'EventTarget & HTMLInputElement' error while using typescript with cleave.js

Question

在打字稿中使用 cleave 时，我在 onChange 事件中遇到上述错误。 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.handleChange 的 rawValue 上面导入的 StyledCleaveInput 使用 'cleave.js' 输入，因此我们可以在输入的 onChange 中使用事件对象中的 event.target.rawValue。也安装了@@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]
  );

Answer 3

如果您不想使用接口，也可以使用 Intersection Types 来扩展 HTMLInputElement 类型，如下所示：

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

属性 'rawValue' does not exist on type 'EventTarget & HTMLInputElement' error while using typescript with cleave.js

Property 'rawValue' does not exist on type 'EventTarget & HTMLInputElement' error while using typescript with cleave.js

javascript

typescript

reactjs

typescript-typings

cleave