Javascript 财产'；原始价值'；不存在于类型'；EventTarget&；HTMLInputElement'；将typescript与cleave.js一起使用时出错

在将CLIVE与typescript一起使用时，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;

import React，{useCallback，useState，useffect，usemo}来自“React”；
从“道具类型”导入道具类型；
从“./style”导入{StyledCleaveInput}；
从“/helper”导入{getCleaveOptions}；
界面道具{
错误？：字符串；
id？：字符串；
值？：字符串；
onChange？：（arg:any）=>any；
禁用？：布尔值；
占位符？：字符串；
deviceType？：字符串；
附加？：对象；
}
const FormattedNumberInput:React.FC=（props）：JSX.Element=>{
const{id，占位符，onChange，error，disabled，deviceType，value}=props；
类型：不动产={
setRawValue:（arg:any）=>any
};
常量[CLIVE，SETCLIVE]=使用状态（null）；
const options=useMemo（（）=>getCleaveOptions（道具），[]）；
const handleChange=useCallback(
（事件：React.ChangeEvent）=>{
if（onChange）{
onChange（event.target.rawValue）；
}
},
[更改]
);
useffect（（）=>{
如果（劈开和值）劈开.setRawValue（值）；
}，[劈开，价值]；
返回(
);
};
FormattedNumberInput.propTypes={
错误：PropTypes.string，
id:PropTypes.string，
值：PropTypes.string，
onChange:PropTypes.func，
禁用：PropTypes.bool，
占位符：PropTypes.string，
deviceType:PropTypes.string，
附加：PropTypes.object，
};
导出默认格式化的NumberInput；

错误位于：handleChange的event.target.rawValue中 上面导入的StyledLeaveInput使用“cleve.js”输入，因此我们可以在输入的一次更改中在事件对象内使用event.target.rawValue。 已安装@@types/cleve，但仍然存在错误

---

提前感谢您的帮助

您似乎正在使用图书馆。在这种情况下，对于

handleChange

事件处理程序方法，不应使用

HTMLInputElement

作为

ChangeEvent

的类型参数。相反，您可能需要使用

clave

（或任何等效项，因为我对这个库不太熟悉）作为类型参数

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

const handleChange=useCallback(
（事件：React.ChangeEvent）=>{
if（onChange）{
onChange（event.target.rawValue）；
}
},
[更改]
);

经过大量研究，我得到的答案是实现我自己的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]
  );

接口ChangeEvent扩展了React.ChangeEvent{
目标：{rawValue:string}&EventTarget&T；
}

然后像这样使用它：

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]
  );

const handleChange=useCallback(
（事件：ChangeEvent）=>{
if（onChange）{
onChange（event.target.rawValue）；
}
},
[更改]
);

您是否使用库来表示输入将具有属性

rawValue

？默认情况下，输入具有

值

属性y。通过使用该库，可以在event.target中给出rawValue。上面是js中的一个工作代码，我正在转换为tsHey，感谢您的解决方案，但这样做时，我仍然会收到错误，因为“找不到名称‘cleve’。”尝试在此处导入cleve，但这不是要用作类型的东西。改为如何<代码>反应。更改事件嘿。再次执行上述更改将给出一种新类型的警告，因为“类型“EventTarget&ComponentClass”上不存在属性“rawValue”